Webpack Build Performance

I want to improve the speed with which webpack builds client side code. I am going over old frontend code that I wrote to improve it, and I am tired of waiting a few seconds for the build to complete.

Date Created:

2 462

References

Webpack Build Performance Documentation

Notes

The following best practices should help, whether you're running build scripts in development or production.

Stay up to date with the latest webpack version
1. Staying up-to-date with Node.js can also help with performance. Also, keeping your package manager (npm or yarn) up-to-date can also help.
Apply loaders to the minimal number of modules necessary. Instead of:

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
    ],
  },
};

Use the include field to only apply the loader modules that actually need to be transformed by it:

const path = require('path');

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
      },
    ],
  },
};

Each additional loader/plugin has a bootup time. Try to use as few tools as possible.
The following steps can increase resolving speed:
1. Minimize the number of items in resolve.modules, resolve.extensions, resolve.mainFiles, resolve.descriptionFiles, as they increase the number of filesystem calls.
2. Set resolve.symlinks: false if you don't use symlinks (e.g. npm link or yarn link)
3. Set resolve.cacheWithContext: false if you use custom resolving plugins, that are not context specific.
Use the DllPlugin to move code that is changed less often into a separate compilation. This will improve the application's compilation speed, although it does increase complexity of the build process.
Decrease the size of the compilation process to increase performance. Try to keep chunks small.
1. Use fewer/smaller libraries.
2. Use the SplitChunksPlugin in Multi-Page Applications.
3. Use the SplitChunksPlugin in async mode in Multi-Page Applications.
4. Remove unused code.
5. Only compile the part of the code you are currently developing on.
The thread-loader can be used to offload expensive loaders to a worker pool.
Use cache option in webpack's configuration. Clear cache directory on postintall in package.json
It is possible to shorten build times by removing ProgressPlugin from webpack's configuration.
The following steps are especially useful in production:
1. Source maps are really expensive. Do you really need them?
The following tools have certain problems that can degrade build performance:
1. Babel
2. 1. Minimize the number of preset/plugins.
3. Typescript
4. 1. Use the fork-ts-checker-webpack-plugin for type checking in a separate process.
  2. Configure loaders to skip typechecking
  3. Use the ts-loader in happyPackMode: true / transpileOnly: tue
5. Sass
6. 1. node-sass has a bug which blocks threads from the Node.js thread pool. When using it with the thread-loader set workerParallelJobs: 2

Webpack Build Performance

References

Notes

Comments

User Comments

Inserting Custom HTML:

Basics:

Inserting Code Expressions:

Inserting $\Large{LaTeX}$ Expressions:

SVG Icon Search

AI Code Generation

The Sanitization of HTML