Javascript 92%区块资产优化-网页包

似乎网页被卡住了 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",
});

我发现

内联源代码映射

对于最快的调试来说是最好的，因为它提供了在源代码中修复哪一行错误的最详细信息，非常直接地说明了在哪里修复什么。相比之下，我发现其他类型更为神秘，并且并没有指示在源代码中修复哪个行号，所以调试需要更长的时间

---

你们是怎么做到的？是否有一种方法可以快速重建，同时仍然能够使用源代码中的错误行号进行调试以修复它（显示在chrome devtools控制台中）？

我通过以下组合获得了巨大成功：

及

HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建速度将显著加快

HappyPack通过并行转换文件，加快了初始网页包的构建速度

---

返回报告并让我知道进展情况。

在执行

ng build

命令的过程中，我遇到了相同的问题

我得到了以下错误：

92%的区块资产优化已终止

进程已在92%时停止，但以下命令对我来说运行良好

试试这些：

pm2 stop all

ng build

pm2 start all

我使用pm2作为我的流程经理

---

我希望它对你也有用

对我来说，92%的区块资产需要花费很长时间，所以我决定让它在一夜之间运行，之后我收到以下错误：

致命错误：调用和重试上次分配失败-JavaScript堆内存不足

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

尝试增加内存限制：

我做了一个测试，它修复了我在谷歌云上的Ubuntu 16.04主机上的“92%区块资产优化TerserPlugin”问题

不确定它是否在你的机器上工作

yarn cache clean

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

sudo reboot

---

在Windows 10上使用带有Angular CLI的节点搜索此问题的任何人

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

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

“92%区块资产优化TerserPlugin”消息在写入文件夹之前出现。如果权限错误，它会自动崩溃并永远挂起。

---

使用管理命令提示符，将目录更改为您知道具有正确写入权限的目录

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

export "NODE_OPTIONS=--max_old_space_size=2000"

---

运行“ng serve--sourceMap=false”

您能分享您的网页配置吗？或者至少有一个外部链接可以看到它？我在一个有webpack的中型/大型项目中工作过，在开发模式下，应用更改只需半秒钟。关键是从加载程序中排除节点_模块，并将供应商放在单独的条目中。可能您正在编译每个版本中的所有node_模块。使用默认的laravel mix网页包配置（使用许多文件），但我们可以覆盖网页包配置（）@the.Bear。您可以分享排除node_模块的情况吗？它仍然存在问题。我想您正在使用babel for reactjs，请检查此项。另一个问题是，如果您有大量依赖项，您最好为您的供应商提供一个单独的条目，因此在保存src文件时，不会编译供应商。这节省了很多时间。但是我不理解你分享的github，laravel网页包的组合（我甚至不在我的生活中使用laravel）。我找不到webpack.config存在的位置。如果你能在你的问题中粘贴生成的网页配置，我可以帮助你。谢谢@KFE，但如果可能的话，我正在寻找没有附加包的东西。正如我在更新中所发布的那样，源代码映射似乎是速度减慢的原因，现在重建需要~6秒，但调试不好，因此将问题集中在更新上。嗨，KFE，有没有办法将其插入angular cli？拥有更多并行处理的能力对我来说非常有趣。@宇航员不知道它是否适用于angular cli，我没有使用过它。不过，这在1.6 x角度的网页设置中确实有效。您能详细介绍一下您所做的工作吗？我们也为此制定了公司规则，如果你能给出详细的说明，那就很好了。我认为“文档”文件夹有一些奇怪的权限。我不知道那里到底出了什么问题。我使用的文件夹是“C:\Users\username\source”。文件夹名称“source”是任意的-您可以随意调用它。我尝试使用此命令。有时，这是有效的，有时则不然。