javascript 92% 块资产优化 - webpack
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49184787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
92% chunk asset optimization - webpack
提问by Wonka
It seems that webpack gets stuck on 92% chunk asset optimizationfor about 30+ seconds to show a simple js/css change. This is too long for anyone sane to sit and wait that much of their life to see something that should be rendered near instantly.
似乎 webpack 卡在 92% 的块资产优化上大约 30 多秒，以显示一个简单的 js/css 更改。对于任何理智的人来说，这太长了，无法坐等他们一生中的大部分时间来看到应该立即呈现的东西。
We're in development mode (so we need source maps, which add to the latency) but it should still NOT be 30+ seconds. Also, we're not using uglify (which I've seen mentioned on GitHub as taking up a good amount of time).
我们处于开发模式（所以我们需要源映射，这会增加延迟）但它仍然不应超过 30 秒。此外，我们没有使用 uglify（我在 GitHub 上看到它占用了大量时间）。
How can we get the build time to be near instant, or much much faster than right now?
我们如何才能使构建时间接近即时，或者比现在快得多？
UPDATE
更新
Here is the laravel-mixfile:
这是laravel-mix文件：
let mix = require('laravel-mix');
mix.react('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.options({
processCssUrls: false
});
mix.webpackConfig({
// Note: First build will always be slower regardless
// Here we're talking about rebuild time
// If commented out, rebuild is ~6 secs
// devtool: "inline-source-map",
// If not commented out, rebuild is 30+ secs
devtool: "inline-source-map",
});
I found inline-source-mapto be the best for quickest debugging, as it provides the most detail on which line of error to fix in source, very very straight forward on what to fix where. I find other types are more cryptic in comparison and there is no indication of which line number to fix in source, so it takes much longer to debug.
我发现inline-source-map它是最快调试的最佳选择，因为它提供了关于在源代码中修复哪一行错误的最详细信息，非常非常直接地说明了在哪里修复。我发现其他类型相比之下更加神秘，并且没有指示在源代码中修复哪个行号，因此调试需要更长的时间。
How do you guys do it? Is there a way to rebuild really fast while still being able to debug with the error line number in source to fix it (shown in chrome devtools console)?
你们是怎么做的？有没有一种方法可以真正快速地重建，同时仍然能够使用源代码中的错误行号进行调试以修复它（显示在 chrome devtools 控制台中）？
回答by Nam G VU
I do a yarn cache cleaningand it fixed my issue "92% chunk asset optimization TerserPlugin" on my Ubuntu 16.04 host on google cloud.
我做了一个纱线缓存清理，它解决了我在谷歌云上的 Ubuntu 16.04 主机上的“92% 块资产优化 TerserPlugin”问题。
Not sure if it works on your machine
不确定它是否适用于您的机器
yarn cache clean
I have this issue on 2nd machine, and this machine requires a reboot.
我在第二台机器上有这个问题，这台机器需要重新启动。
sudo reboot
回答by KFE
I've had great success using a combination of the following:
我使用以下组合取得了巨大的成功：
https://github.com/mzgoddard/hard-source-webpack-plugin
https://github.com/mzgoddard/hard-source-webpack-plugin
and
和
https://github.com/amireh/happypack
https://github.com/amireh/happypack
HardSourceWebpackPlugin is a plugin for webpack to provide an intermediate caching step for modules. In order to see results, you'll need to run webpack twice with this plugin: the first build will take the normal amount of time. The second build will be signficantly faster.
HardSourceWebpackPlugin 是 webpack 的一个插件，用于为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行 webpack 两次：第一次构建将花费正常的时间。第二个构建将显着更快。
HappyPack makes initial webpack builds faster by transforming files in parallel.
HappyPack 通过并行转换文件使初始 webpack 构建更快。
Report back and let me know how it goes.
回来报告并告诉我进展如何。
回答by vipin goyal
I too faced similar issue while running build remotely, So, in jenkin after adding following command, problem got resolved for me.
我在远程运行构建时也遇到了类似的问题，因此，在添加以下命令后，在 jenkin 中，问题为我解决了。
export "NODE_OPTIONS=--max_old_space_size=2000"
回答by Victoria
For me 92% chunk asset was taking forever, so I decided to let it run overnight, after it later I received the following error:
对我来说 92% 的块资产永远占用，所以我决定让它在一夜之间运行，之后我收到以下错误：
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
致命错误：CALL_AND_RETRY_LAST 分配失败 - JavaScript 堆内存不足
Solution: The core problem is that node comes with a default memory restriction to 1.76 GB. If you need more you need to set the option --max_old_space_size={desiredSize} when you start a node process.
解决方案：核心问题是node自带的默认内存限制为1.76GB。如果您需要更多，则需要在启动节点进程时设置选项 --max_old_space_size={desiredSize}。
Try to increase the memory limit:
尝试增加内存限制：
回答by Aeptitude
Anyone googling around with this issue using Node with Angular CLI on Windows 10;
任何在 Windows 10 上使用Node 和 Angular CLI搜索这个问题的人；
Make sure the directory the CLI is writing to has the appropriate write permissions. I got this exact issue when trying to write to c:/Users/UserName/Documents/SoultionDir
确保 CLI 写入的目录具有适当的写入权限。我在尝试写入 c:/Users/UserName/Documents/SoultionDir 时遇到了这个确切的问题
For me it might be to do with company usage policy.
对我来说，这可能与公司的使用政策有关。
The "92% chunk asset optimization TerserPlugin" message comes up just before it writes to the folder. If the permissions are wrong it silently crashes and hangs forever. Change the directory to one you know has the correct permissions to write to, using an admin command prompt.
“ 92% 块资产优化 TerserPlugin”消息在写入文件夹之前出现。如果权限错误，它会默默地崩溃并永远挂起。使用管理员命令提示符将目录更改为您知道具有正确写入权限的目录。
回答by hardy
I have faced the same problem during the execution of ng buildcommand.
我在执行ng build命令期间遇到了同样的问题。
I got the following error:
我收到以下错误：
92% chunk asset optimizationKilled
92% 区块资产优化杀死
The process has been stopped at 92% but the following commands are working fine for me.
该过程已在 92% 处停止，但以下命令对我来说工作正常。
Try these:
试试这些：
pm2 stop all
ng build
pm2 start all
I am using pm2as my process manager.
我正在pm2用作我的流程管理器。
I hope it works for you too.
我希望它也适用于你。
