webpack 似乎卡住了 92% 的块资源优化 大约 30 秒以上,以显示简单的 js/css 更改。对于任何心智正常的人来说,这太长了,无法坐等一生中的大部分时间来看到应该立即渲染的东西。
我们处于开发模式(因此我们需要源映射,这会增加延迟),但它仍然不应该超过 30 秒。另外,我们没有使用 uglify(我在 GitHub 上看到提到它占用了大量时间)。
我们怎样才能让构建时间接近即时,或者比现在快得多?
更新
这是
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",
});
我发现
inline-source-map
是最快调试的最佳选择,因为它提供了源代码中要修复哪一行错误的最详细信息,非常非常直接地说明了要修复的内容。我发现相比之下,其他类型更加神秘,并且没有指示要在源代码中修复哪个行号,因此调试需要更长的时间。
你们是怎么做到的?有没有办法快速重建,同时仍然能够使用源代码中的错误行号进行调试来修复它(在 chrome devtools 控制台中显示)?
我在远程运行构建时也遇到了类似的问题, 因此,在 jenkin 中添加以下命令后,问题得到了解决。
export "NODE_OPTIONS=--max_old_space_size=2000"
我进行了yarn缓存清理,它解决了我在谷歌云上的Ubuntu 16.04主机上的“92%块资产优化TerserPlugin”问题。
不确定它是否适用于您的机器
yarn cache clean
我在第二台机器上遇到了这个问题,并且这台机器需要重新启动。
sudo reboot
奔跑
ng serve --sourceMap=false
我结合使用以下方法取得了巨大成功:
https://github.com/mzgoddard/hard-source-webpack-plugin
和
https://github.com/amireh/happypack
HardSourceWebpackPlugin 是一个 webpack 插件,为模块提供中间缓存步骤。为了查看结果,您需要使用此插件运行 webpack 两次:第一次构建将花费正常的时间。第二次构建将明显更快。
HappyPack 通过并行转换文件使初始 webpack 构建速度更快。
回来报告并让我知道进展如何。
对我来说,92%的块资产永远需要,所以我决定让它运行一夜,之后我收到以下错误:
致命错误:CALL_AND_RETRY_LAST 分配失败 - JavaScript 堆内存不足
解决方案:核心问题是node默认内存限制为1.76GB。如果您需要更多,则需要在启动节点进程时设置选项 --max_old_space_size={desiredSize} 。
尝试增加内存限制:
任何人在 Windows 10 上使用 Node with Angular CLI 来搜索此问题;
确保 CLI 写入的目录具有适当的写入权限。 当我尝试写入 c:/Users/UserName/Documents/SoultionDir
时,我遇到了这个确切的问题对我来说,这可能与公司的使用政策有关。
在写入文件夹之前会出现“92% 块资产优化 TerserPlugin”消息。如果权限错误,它会默默地崩溃并永远挂起。 使用管理命令提示符将目录更改为您知道具有正确写入权限的目录。
我对以下规格也遇到了同样的问题
webpack version 5.69.0
我的 webpack 复制插件选项
new CopyPlugin({
patterns: [
{
to({ context, absoluteFilename }) {
return `./${path.relative(context, absoluteFilename)}`;
},
from: 'public',
globOptions: {
ignore: ['**/index.html']
}
}
]
})
我如何修复它,将这些选项添加到现有配置之上
info: {
minimized: true
}
所以上面的作用是告诉 webpack 不要缩小文件(所以问题是我有几个由外部库之一生成的大约 20MB 的文件,而 webpack 试图缩小它)
了解更多信息,请访问 https://www.npmjs.com/package/copy-webpack-plugin#info
所以最终的webpack.prod.js配置是
const { merge } = require('webpack-merge');
const path = require('path');
const common = require('./webpack.common.js');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
plugins: [
new CopyPlugin({
patterns: [
{
to({ context, absoluteFilename }) {
return `./${path.relative(context, absoluteFilename)}`;
},
from: 'public',
globOptions: {
ignore: ['**/index.html']
},
info: {
minimized: true
}
}
]
})
]
});
我想赞扬这个答案https://stackoverflow.com/a/69081475/9871509,因为它帮助我找到了这个解决方案。
在 2023 年,同样的问题仍然发生,就我而言,通过 Webpacker 使用 webpack-4。
当
terser-webpack-plugin中的
parallel
设置太高时会发生。就我而言,它是 10,这是 Webpacker 中的默认值。
将其减少到较低的值(例如 2),构建过程会顺利进行。
我在执行
ng build
命令时遇到了同样的问题。
我收到以下错误:
92% 区块资产优化被杀死
该过程已停止在 92%,但以下命令对我来说运行良好。
尝试这些:
pm2 stop all
ng build
pm2 start all
我使用
pm2
作为我的流程管理器。
我希望它也适合你。