How to Fine‑Tune Webpack Bundles for Faster Loads and Smaller Files

Introduction

Webpack is the most widely used JavaScript build and bundling tool today, and our team relies on it for traditional non‑SPA pages. We originally used

CommonsChunkPlugin

to extract common modules and

UglifyJS

to shrink output size, with a configuration like:

<code>{
  // ...
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: 5,
    })
  ],
}
</code>

However, this granularity was too coarse for fine‑grained control.

1. Analyze Bundle Results

The

webpack-bundle-analyzer

plugin visualizes each file’s contribution to the bundle. We add it to the production configuration:

<code>const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// ...
plugins: [
  new BundleAnalyzerPlugin(),
]
</code>

The generated visualization reveals two serious issues:

Some scripts that could be shared are not extracted into a common chunk.

The large

areaData_min.js

file, used by many pages but not a strong dependency, is bundled into the main output.

Other common problems include an oversized vendor chunk and multiple versions of the same library.

2. Module Asynchrony

We first async‑load modules that are not strong dependencies. In Webpack 1 we use

require.ensure

; in Webpack 2+ we use the standard dynamic

import()

syntax. For example, we async‑load

areaData_min.js

:

<code>import('assets/areaData_min').then(data => {
  this.setState({ areaData: data });
});
</code>

The result is a separate

0_{hash}.js

file, noticeably reducing overall bundle size.

For React components we can create an

AsyncWrapper

to reuse the async‑loading logic. Below is a minimal implementation (dynamic imports must be static, so we cannot use a variable path directly):

<code>import React, { Component, createElement } from 'react';
export default class AsyncWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = { component: null };
  }
  componentDidMount() {
    const { load } = this.props;
    load().then(module => {
      this.setState({ component: module.default });
    });
  }
  componentWillUnmount() {
    this.setState({ component: null });
  }
  render() {
    const { component } = this.state;
    return component ? createElement(component, this.props) : null;
  }
}
// Usage example
const AsyncComponent = props => (
  <AsyncWrapper load={() => import('./TargetComponent')} {...props} />
);
</code>

Libraries such as

react-loadable

can achieve the same effect.

3. Adjust CommonsChunkPlugin Settings

We notice that some reusable files are still not merged into the vendor chunk. A simple tweak reduces

minChunks

from 5 to 4:

<code>{
  // ...
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: 4,
    })
  ],
}
</code>

Be careful with the

minChunks

value: setting it too low inflates the vendor bundle, reducing cache efficiency. In most cases we avoid relying heavily on

minChunks

because a stable vendor chunk yields better long‑term caching.

4. Summary

Set

NODE_ENV

to

production

and add

DefinePlugin

for further size reductions.

Use

DllPlugin

to improve vendor stability and shorten compilation time.

After applying these optimizations, the final bundle size is dramatically smaller, as shown in the comparison image below.