92% 块资源优化 - webpack

Posted 2023-02-22

【中文标题】92% 块资源优化 - webpack

【英文标题】：92% chunk asset optimization - webpack

【发布时间】：2018-08-17 11:53:42

【问题描述】：

似乎 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 控制台中）？

【问题讨论】：

你能分享你的 webpack 配置吗？或者至少有一个外部链接可以看到它？我曾在一个中/大型项目中使用 webpack 并在开发模式下工作，只需半秒即可应用更改。关键是从您的加载器中排除 node_modules 并将供应商放在单独的条目中。也许您正在编译每个构建中的所有 node_modules。

使用默认的 laravel mix webpack 配置（使用很多文件），但我们可以覆盖 webpack 配置 (github.com/JeffreyWay/laravel-mix/blob/master/docs/…)

@The.Bear 你能分享一下排除 node_modules 的样子吗？它仍然有问题..

我想你正在使用 babel for reactjs，检查这个github.com/babel/babel-loader#troubleshooting。

另一个问题，如果你有大量的依赖，你能做的最好的就是为你的供应商单独的条目，所以当你保存你的 src 文件时，供应商不会被编译.这样可以节省很多时间。但是看不懂你分享的github，laravel webpack mix（我这辈子都没用过laravel）。我找不到 webpack.config 的位置。如果您可以将生成的 webpack 配置粘贴到您的问题中，我可以为您提供帮助。

【参考方案1】：

运行ng serve --sourceMap=false

【参考方案2】：

我在远程运行构建时也遇到了类似的问题， 因此，在 jenkin 添加以下命令后，我的问题得到了解决。

export "NODE_OPTIONS=--max_old_space_size=2000"

【讨论】：

我试试这个命令。有时这有效，有时无效。

【参考方案3】：

在 Windows 10 上使用 Node 和 Angular CLI 搜索此问题的任何人；

确保 CLI 正在写入的目录具有适当的写入权限。 我在尝试写入 c:/Users/UserName/Documents/SoultionDir 时遇到了这个确切的问题

对我来说，这可能与公司使用政策有关。

“92% 块资产优化 TerserPlugin”消息在写入文件夹之前出现。如果权限错误，它会默默地崩溃并永远挂起。 使用管理员命令提示符将目录更改为您知道具有正确写入权限的目录。

【讨论】：

你能更详细地说明你做了什么吗？我们也为此制定了公司规则，如果您能够提供一些详细说明，那将是很好的。

我认为“文档”文件夹有一些奇怪的权限。我不知道那里到底出了什么问题。我使用的文件夹是“C:\Users\username\source”，文件夹名称“source”是任意的——你可以随意命名。

【参考方案4】：

我做了一个yarn cache cleaning，它解决了我在谷歌云上的 Ubuntu 16.04 主机上的问题“92% 块资产优化 TerserPlugin”。

不确定它是否适用于您的机器

yarn cache clean

我在第二台机器上遇到了这个问题，这台机器需要重新启动。

sudo reboot

【参考方案5】：

对我来说 92% 的块资产一直占用，所以我决定让它在一夜之间运行，之后我收到以下错误：

致命错误：CALL_AND_RETRY_LAST 分配失败 - JavaScript 堆内存不足

解决方案：核心问题是节点默认内存限制为 1.76 GB。如果您需要更多，则需要在启动节点进程时设置选项 --max_old_space_size=desiredSize。

尝试增加内存限制：

https://www.npmjs.com/package/increase-memory-limit

【参考方案6】：

我在执行ng build命令时也遇到了同样的问题。

我收到以下错误：

92% 的块资产优化被杀

该过程已停止在 92%，但以下命令对我来说工作正常。

试试这些：

pm2 stop all

ng build

pm2 start all

我使用pm2 作为我的流程管理器。

我希望它也对你有用。

【讨论】：

这与提出的问题无关，甚至没有说他们正在使用 pm2

是的，你是对的。最后，我得到了这个问题的解决方案。整个游戏都是关于记忆的。在构建过程中，构建器需要一些空闲内存。在我的情况下，当我停止所有 pm2 进程时，释放了几个内存并且构建器将其用于他们的进程，我认为 pm2 正在制造问题。我每次都遇到这个问题，然后我在 2019 年增加了我的交换内存分区，从那天到现在，一天再也没有遇到同样的问题，并且在没有 pm2 停止的情况下工作。

【参考方案7】：

我使用以下组合取得了巨大的成功：

https://github.com/mzgoddard/hard-source-webpack-plugin

和

https://github.com/amireh/happypack

HardSourceWebpackPlugin 是一个用于 webpack 的插件，用于为模块提供中间缓存步骤。为了看到结果，你需要使用这个插件运行 webpack 两次：第一次构建将花费正常的时间。第二次构建将明显更快。

HappyPack 通过并行转换文件使初始 webpack 构建速度更快。

回来报告并告诉我进展如何。

【讨论】：

感谢@KFE，但如果可能的话，我一直在寻找没有额外软件包的东西。似乎源映射是我的更新中发布的减速原因，现在重建需要大约 6 秒但没有很好的调试，因此将问题集中在更新上。

嗨 KFE，有什么想法可以将其插入 Angular cli 中吗？拥有更多并行处理的能力对我来说非常有趣。

@Astronaut 不知道它是否适用于 Angular cli，我没有使用它。不过，这确实适用于 Angular 1.6 x webpack 设置。