92% 块资源优化 - webpack

Question

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 控制台中显示）？

Answer 1

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

export "NODE_OPTIONS=--max_old_space_size=2000"

Answer 2

我进行了yarn缓存清理，它解决了我在谷歌云上的Ubuntu 16.04主机上的“92％块资产优化TerserPlugin”问题。

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

yarn cache clean

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

sudo reboot

Answer 3

奔跑

ng serve --sourceMap=false

Answer 4

我结合使用以下方法取得了巨大成功：

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

和

https://github.com/amireh/happypack

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

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

回来报告并让我知道进展如何。

Answer 5

对我来说，92％的块资产永远需要，所以我决定让它运行一夜，之后我收到以下错误：

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

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

尝试增加内存限制：

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

Answer 6

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

确保 CLI 写入的目录具有适当的写入权限。 当我尝试写入 c:/Users/UserName/Documents/SoultionDir

时，我遇到了这个确切的问题

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

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

Answer 7

我对以下规格也遇到了同样的问题

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，因为它帮助我找到了这个解决方案。

Answer 8

在 2023 年，同样的问题仍然发生，就我而言，通过 Webpacker 使用 webpack-4。

当

terser-webpack-plugin

中的 parallel 设置太高时会发生。就我而言，它是 10，这是 Webpacker 中的默认值。

将其减少到较低的值（例如 2），构建过程会顺利进行。

Answer 9

我在执行

ng build

命令时遇到了同样的问题。

我收到以下错误：

92% 区块资产优化被杀死

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

尝试这些：

pm2 stop all

ng build

pm2 start all

我使用

pm2

作为我的流程管理器。

我希望它也适合你。