Analyzing Webpack build statistics to reduce bundle size

Webpack build produces a bundle (app.js). The bundle contains scripts and styles. In this post, I will show how to analyze the bundle size.

Analyze bundle size

There is a command to produce build statistics in the form of JSON file.

webpack --profile --json > stats.json

There is an online analyse tool to analyze the build statistics. On uploading the JSON file, the analyse tool shows a dashboard. The dashboard has seven tabs. There are three tabs to view the build output – modules, chunks and assets. There are two tabs for viewing any warnings or errors. It also has the hints tab which provides useful hints to improve the build performance.

To view the modules which are part of the bundle, click the Modules tab. The modules can be sorted by the size in descending order.

The table shows where to optimise. Another useful tool is the npm package – webpack-bundle-size-analyzer. It provides the packages in their decreasing order of size.

npm install -g webpack-bundle-size-analyzer
webpack-bundle-size-analyzer stats.json

Optimize bundle size

There are a few ways to optimize the bundle size. However, we are left at the mercy of the package authors to provide alternatives. For example, antd provides a plugin babel-plugin-import to reduce the antd bundle size. A webpack configuration for processing JSX files where antd bundle size is reduced is shown below.

{
    test: /\.jsx$/,
    loader: 'babel-loader',
    exclude: [nodeModulesDir],
    options: {
        cacheDirectory: true,
        plugins: [
            ["import", { "libraryName": "antd", "style": true }],
        ],
        presets: ['es2015', 'stage-0', 'react']
    }
},

The JSX files are processed using babel-loader. The babel-loader uses the import plugin. The import plugin imports JavaScript and styles selectively from the antd package. Only the relevant antd components used within the application are part of the application bundle. This reduces the size of antd package within the bundle. The reduced size can be verified by running webpack-bundle-size-analyzer tool again.

For more information on how to analyze build statistics, please read the article on SurviveJS.