Webpack packaging is too slow to build to try these solutions to improve packaging speed

The problem of slow packaging speed of Webpack is particularly obvious in large-scale projects, affecting development efficiency. Here are some common optimization tips that can help improve the packaging speed of Webpack:

1. Reduce file search range

Use include and exclude:

Forbabel-loader, ts-loaderWait for loader, useincludeSpecify the directory to be processed, or useexcludeExclude files that do not need to be processed and reduce the scope of files searched and processed by Webpack.

{
  test: /\.js$/,
  use: 'babel-loader',
  include: (__dirname, 'src'), // Only process src directory  exclude: /node_modules/ // Exclude node_modules directory}

2. Optimize Loader

Cache Loader results:

usecache-loaderorbabel-loaderofcacheDirectoryOption to cache the Loader result to disk to reduce the secondary compilation time.

{
  test: /\.js$/,
  use: [
    'cache-loader',
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true // Turn on cache      }
    }
  ]
}

Parallel processing:

usethread-loaderPerform multi-process parallel processing, especially for heavy compilation tasks such as Babel and TypeScript.

{
  test: /\.js$/,
  use: [
    'thread-loader',
    'babel-loader'
  ]
}

3. Reduce packaging volume

Tree Shaking:

Make sure to use ES6 modular syntax (importandexport) and turn on in production environmentmode: 'production', Webpack will automatically execute Tree Shaking to remove unused code.

Use SplitChunksPlugin:

Split third-party libraries and public modules into independent packages to avoid repackaging these contents every time you package.

optimization: {
  splitChunks: {
    chunks: 'all',
  },
}

Loading on demand:

Using dynamic import (import()) Implement on-demand loading, reduce the initial packaging volume, and improve packaging speed.

4. Development model optimization

usewebpack-dev-serverofhotmodel:

Turn on the Hot Module Replacement (HMR), update only the modified parts, and reduce the reconstruction time.

devServer: {
  hot: true,
}

Reduce the complexity of Source Maps:

In development mode, select the faster Source Map type, such aseval-source-maporcheap-module-source-map。

devtool: 'eval-source-map'

5. Plug-in optimization

Remove unnecessary plugins:

Each plugin will increase the packaging time and remove unnecessary plugins to optimize packaging speed.

Optimization TerserPlugin:

For JavaScript compression plug-insTerserPlugin, can enable parallelism (parallel), uses multi-core CPU to speed up the compression process.

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      parallel: true, // Turn on multi-process compression    }),
  ],
}

6. Use persistent cache

Webpack 5's persistent cache:

Webpack 5 introduces persistent caching function, which can cache packaged results to the file system, improving the speed of secondary packaging.

 = {
  cache: {
    type: 'filesystem', //Use file system cache  },
};

With these optimization strategies, you can significantly improve the packaging speed of Webpack, especially in both development and production environments.

Summarize

This is all about this article about how to improve the packaging speed by trying this article. For more related content about Webpack packaging construction too slow, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!