Optimizing Performance with the SplitChunksPlugin in Webpack

Himanshu Gupta — Sat, 31 Dec 2022 11:07:41 +0000

Webpack is a powerful tool for building and bundling frontend applications, but as your app grows, the size of your bundle can also increase. This can lead to slower load times and a less optimal user experience.

One way to improve the performance of your app is to split your bundle into smaller chunks, which can be loaded on demand as the user navigates through your app. This is especially useful if you have a large app with many dependencies, as it can reduce the time it takes for the initial bundle to load.

In this tutorial, we'll look at how to use the SplitChunksPlugin in Webpack to split your bundle into smaller chunks based on size.

Setting Up Webpack

Before we get started, make sure you have the following tools installed:

 Node.js and npm (the Node Package Manager)

To set up Webpack, create a new directory for your project and run the following command to initialize a package.json file:

npm init -y

Next, install Webpack and its dependencies by running the following command:

npm install --save-dev webpack webpack-cli

Configuring the SplitChunksPlugin

To split your bundle into smaller chunks based on size, you'll need to use the SplitChunksPlugin. First, install the plugin by running the following command:

npm install --save-dev webpack-split-chunks

Then, update your Webpack configuration to include the SplitChunksPlugin, like so:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      maxSize: 250000,
      chunks: 'all'
    }
  }
};

This configuration will split your bundle into multiple smaller bundles if any of them are larger than 250KB in size.

You can also specify specific dependencies to be split into their own bundles by using the cacheGroups option in the SplitChunksPlugin configuration. For example:

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all',
        maxSize: 250000
      }
    }
  }
}

This will extract all dependencies in the node_modules directory into a separate bundle called vendor.bundle.js if the bundle is larger than 250KB in size.

Running Webpack

To run Webpack with the SplitChunksPlugin configuration, use the following command:

npx webpack

Using the Split Chunks

To use the split chunks in your app, you'll need to include them in your HTML file. You can do this by using the script
tag and specifying the path to the chunk file.

For example, if you have a chunk called vendor.bundle.js
that contains all your vendor dependencies, you can include it in your HTML file like this:

<script src="dist/vendor.bundle.js"></script>

Make sure to include the vendor chunk before the main bundle, as it will be needed by the main bundle.

You can also use the script tag to asynchronously load the split chunks when they are needed. To do this, you can use the async attribute in the script tag, like so:

<script src="dist/vendor.bundle.js" async></script>

This will allow the browser to load the vendor chunk asynchronously, without blocking the rendering of the page.

Conclusion

Splitting your bundle into smaller chunks can improve the performance of your app and provide a better user experience. By using the SplitChunksPlugin in Webpack, you can easily split your bundle based on size or specific dependencies.