How to Optimize Webpack 2 for Smaller Bundles and Faster Development

Optimizing Output

Smaller bundles load faster and reduce bandwidth usage. You can achieve this through several techniques.

Compress CSS

The css-loader does not minify CSS by default. Enable minification with the css-loader?minimize option, which uses cssnano under the hood.

Tree Shaking

Tree shaking removes unused exports by leveraging the static nature of ES6 import / export. To make it work:

Configure Babel to preserve import / export statements instead of converting them to CommonJS. Example configuration:

"presets": [
  [
    "es2015",
    { "modules": false }
  ]
]

Use libraries that provide ES6 module builds. For example, Redux publishes both lib (CommonJS) and es (ES6) directories. Configure Webpack to prefer the jsnext:main field:

module.exports = {
  resolve: {
    mainFields: ['jsnext:main', 'main']
  }
};

Optimize UglifyJsPlugin

The --optimize-minimize flag enables UglifyJsPlugin, but you should override its defaults to remove comments and whitespace:

new UglifyJsPlugin({
  beautify: false,
  comments: false,
  compress: {
    warnings: false,
    drop_console: true,
    collapse_vars: true,
    reduce_vars: true,
  }
});

Define NODE_ENV=production

Many libraries (e.g., React) contain code guarded by process.env.NODE_ENV !== 'production'. Setting NODE_ENV to production lets UglifyJs treat those branches as dead code and strip them.

if (process.env.NODE_ENV !== 'production') {
  // development‑only warnings
}

Use CommonsChunkPlugin

CommonsChunkPlugin extracts modules shared by multiple bundles into a separate chunk, reducing duplicate code and improving caching across pages.

DedupePlugin and OccurrenceOrderPlugin

These plugins were removed in Webpack 2 because their functionality is now built‑in.

Use imagemin-webpack-plugin to compress images

Use webpack-spritesmith to generate sprite sheets

Use babili for ES6‑compatible minification

Apply these optimizations only for production builds; they are costly for development.

Optimizing Development Experience

Focus on faster builds and more convenient features.

Faster Builds

Narrow File Search Scope

Configure resolve.modules to point directly to the node_modules directory, avoiding upward recursive searches.

module.exports = {
  resolve: {
    modules: [path.resolve(__dirname, 'node_modules')]
  }
};

Also simplify loader test regular expressions and use include to limit processing to specific folders.

Use a simple regex when only .js files are present, e.g., /\.js$/.

Limit Babel compilation to the src directory:

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: path.resolve(__dirname, 'src')
}

Enable babel-loader Cache

Activate caching to reuse compiled results and speed up subsequent builds:

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

Use Alias

Map module paths to pre‑built distributions to avoid deep resolution:

module.exports = {
  resolve: {
    alias: {
      'moment': 'moment/min/moment.min.js',
      'react': 'react/dist/react.js',
      'react-dom': 'react-dom/dist/react-dom.js'
    }
  }
};

Use noParse

Exclude large, self‑contained libraries from parsing:

module.exports = {
  module: {
    noParse: /node_modules\/(jquery|moment|chart\.js)/
  }
};

Use happypack for multi‑process builds

Use DllPlugin to reuse modules

More Convenient Features

Hot Module Replacement

HMR updates changed modules without a full page reload. Enable it with the --hot flag and add acceptance code:

import App from './app';
function run() { render(<App/>, document.getElementById('app')); }
run();
if (process.env.NODE_ENV !== 'production') {
  module.hot.accept('./app', run);
}

Auto‑generate HTML

Use a custom plugin (e.g., web-webpack-plugin) to generate HTML that automatically injects entry scripts.

module.exports = {
  entry: { A: './a', B: './b' },
  plugins: [
    new WebPlugin({
      filename: 'index.html',
      requires: ['A', 'B']
    })
  ]
};

The plugin outputs an index.html that includes A.js and B.js scripts.

Analyze Output

Run Webpack with --json --profile to generate a stats.json file, then upload it to the Webpack Analyze tool for visual inspection of bundle composition. webpack --json --profile > stats.json The article concludes with full development and production Webpack configurations.