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:

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

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:

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

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:

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

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):

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} />
);

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:

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

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.