webpack 92%区块资产优化-网络包

zqdjd7g9  于 2022-11-13  发布在  Webpack
关注(0)|答案(8)|浏览(192)

看起来webpack在92%的块资产优化上停留了大约30多秒,才显示了一个简单的js/css更改。对于任何一个理智的人来说,这太长了,他们不可能坐着等待这么长时间来看到应该立即呈现的东西。
我们正处于开发模式(所以我们需要源代码Map,这会增加延迟),但它仍然不应该超过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控制台中)?

64jmpszr

64jmpszr1#

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

export "NODE_OPTIONS=--max_old_space_size=2000"
tvokkenx

tvokkenx2#

我做了一个yarn cache cleaning,它修复了我的问题“92%块资产优化TerserPlugin”在我的Ubuntu 16.04主机上的谷歌云。
不确定它是否在您的计算机上工作

yarn cache clean

我在第二台计算机上遇到此问题,此计算机需要重新启动。

sudo reboot
x4shl7ld

x4shl7ld3#

运行ng serve --sourceMap=false

agyaoht7

agyaoht74#

我已经通过以下几种方法取得了巨大成功:
https://github.com/mzgoddard/hard-source-webpack-plugin

https://github.com/amireh/happypack
HardSourceWebpackPlugin是一个webpack插件,为模块提供一个中间缓存步骤。为了查看结果,您需要使用此插件运行webpack两次:第一次构建将花费正常的时间。2第二次构建将明显更快。
HappyPack通过并行转换文件使初始webpack构建更快。
向我汇报情况。

e0bqpujr

e0bqpujr5#

对我来说,92%的大块资产是永远,所以我决定让它运行一夜,它之后,我收到了以下错误:

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

解决方案:核心问题是节点的默认内存限制为1.76 GB。如果您需要更多内存,则需要在启动节点进程时设置选项--max_old_space_size={desiredSize}。
尝试增加内存限制:
https://www.npmjs.com/package/increase-memory-limit

0dxa2lsx

0dxa2lsx6#

任何在Windows 10上使用Node和Angular CLI搜索此问题的人;
确保CLI正在写入的目录具有适当的写入权限。我在尝试写入c:/Users/UserName/Documents/SoultionDir时遇到了此问题
对我来说,这可能与公司的使用政策有关。
92%块资产优化TerserPlugin”消息在写入文件夹之前出现。如果权限错误,它会自动崩溃并永久挂起。使用管理命令提示符将目录更改为您知道具有正确写入权限的目录。

rwqw0loc

rwqw0loc7#

我遇到了与以下规格相同的问题

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

3wabscal

3wabscal8#

我在执行ng build命令时遇到过同样的问题。
出现以下错误:
92%的区块资产优化已取消
进程已在92%时停止,但以下命令对我来说工作正常。
请尝试以下操作:

pm2 stop all

ng build

pm2 start all

我使用pm2作为我的进程管理器。
我希望它对你也有用。

相关问题