92% chunk asset optimization - webpack

Question

It seems that webpack gets stuck on 92% chunk asset optimization for about 30+ seconds to show a simple js/css change. This is too long for anyone sane to sit and wait that much of their life to see something that should be rendered near instantly.

We're in development mode (so we need source maps, which add to the latency) but it should still NOT be 30+ seconds. Also, we're not using uglify (which I've seen mentioned on GitHub as taking up a good amount of time).

How can we get the build time to be near instant, or much much faster than right now?

UPDATE

Here is the laravel-mix file:

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",
});

I found inline-source-map to be the best for quickest debugging, as it provides the most detail on which line of error to fix in source, very very straight forward on what to fix where. I find other types are more cryptic in comparison and there is no indication of which line number to fix in source, so it takes much longer to debug.

How do you guys do it? Is there a way to rebuild really fast while still being able to debug with the error line number in source to fix it (shown in chrome devtools console)?

Answer 1

I too faced similar issue while running build remotely, So, in jenkin after adding following command, problem got resolved for me.

export "NODE_OPTIONS=--max_old_space_size=2000"

Answer 2

I do a yarn cache cleaning and it fixed my issue "92% chunk asset optimization TerserPlugin" on my Ubuntu 16.04 host on google cloud.

Not sure if it works on your machine

yarn cache clean

I have this issue on 2nd machine, and this machine requires a reboot.

sudo reboot

Answer 3

Run ng serve --sourceMap=false

Answer 4

I've had great success using a combination of the following:

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

and

https://github.com/amireh/happypack

HardSourceWebpackPlugin is a plugin for webpack to provide an intermediate caching step for modules. In order to see results, you'll need to run webpack twice with this plugin: the first build will take the normal amount of time. The second build will be signficantly faster.

HappyPack makes initial webpack builds faster by transforming files in parallel.

Report back and let me know how it goes.

Answer 5

For me 92% chunk asset was taking forever, so I decided to let it run overnight, after it later I received the following error:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Solution: The core problem is that node comes with a default memory restriction to 1.76 GB. If you need more you need to set the option --max_old_space_size={desiredSize} when you start a node process.

Try to increase the memory limit:

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

Answer 6

Anyone googling around with this issue using Node with Angular CLI on Windows 10;

Make sure the directory the CLI is writing to has the appropriate write permissions. I got this exact issue when trying to write to c:/Users/UserName/Documents/SoultionDir

For me it might be to do with company usage policy.

The "92% chunk asset optimization TerserPlugin" message comes up just before it writes to the folder. If the permissions are wrong it silently crashes and hangs forever. Change the directory to one you know has the correct permissions to write to, using an admin command prompt.

Answer 7

I got the same issue with following specs

webpack version 5.69.0

my webpack copy plugins options

new CopyPlugin({
  patterns: [
    {
      to({ context, absoluteFilename }) {
        return `./${path.relative(context, absoluteFilename)}`;
      },
      from: 'public',
      globOptions: {
        ignore: ['**/index.html']
      }
    }
  ]
})

How I fixed it added these options to above existing configuration

info: {
   minimized: true
}

so what above does is it tell webpack to not minifiy the files (so the issue was I was having couple of file of about 20MB generated by one of external library and webpack was trying to minify it)

for more info visit https://www.npmjs.com/package/copy-webpack-plugin#info

So the final webpack.prod.js configuration is

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
          }
        }
      ]
    })
  ]
});

I would like to give credit to this answer https://stackoverflow.com/a/69081475/9871509, since it helped me to reach this solution.

Answer 8

I have faced the same problem during the execution of ng build command.

I got the following error:

92% chunk asset optimizationKilled

The process has been stopped at 92% but the following commands are working fine for me.

Try these:

pm2 stop all

ng build

pm2 start all

I am using pm2 as my process manager.

I hope it works for you too.