Manual and Automatic Code Splitting in Webpack: Principles, Configuration, and Practice

The author describes a real‑world scenario where a large language pack is duplicated across multiple entry points, inflating the bundle size, and introduces two approaches to eliminate this redundancy: manual DLL extraction and automatic code splitting.

Manual DLL Extraction

First, a separate webpack.dll.config.js is created to bundle common libraries (e.g., jquery and lodash ) into DLL files and generate corresponding manifest JSON files. The scripts section of package.json is extended with a dll command to run this configuration.

const webpack = require("webpack");
const path = require("path");
module.exports = {
  entry: {
    jquery: ["jquery"],
    lodash: ["lodash"]
  },
  output: {
    filename: "dll/[name].js",
    library: "[name]"
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve(__dirname, "dll", "[name].manifest.json"),
      name: "[name]"
    })
  ]
};

After building the DLLs, the main webpack.config.js references them via webpack.DllReferencePlugin and the generated manifests. The HTML template manually includes the DLL scripts before the application bundles, ensuring the shared code is loaded only once.

Automatic Code Splitting

Webpack’s built‑in SplitChunksPlugin (replacing the older CommonsChunkPlugin ) can automatically extract common modules. By setting optimization.splitChunks options such as chunks: "all" , maxSize , minChunks , minSize , and automaticNameDelimiter , developers control how and when new chunks are created.

module.exports = {
  mode: "production",
  entry: {
    main: "./src/index.js",
    handler: "./src/handler.js"
  },
  output: {
    filename: "[name].[hash:4].js"
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      maxSize: 50 * 1024,
      minChunks: 1,
      minSize: 20000,
      automaticNameDelimiter: "---"
    }
  },
  plugins: [
    new BundleAnalyzerPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ template: "./index.html" })
  ]
};

The configuration also defines cacheGroups to treat third‑party modules differently. The default vendors group matches /node_modules/ and extracts those libraries into a separate chunk, while a default group handles other shared code. Adjusting priority and reuseExistingChunk influences which group wins when a module matches multiple criteria.

optimization: {
  splitChunks: {
    chunks: "all",
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: 2
      },
      default: {
        minChunks: 2,
        priority: 1,
        reuseExistingChunk: true
      }
    }
  }
}

Both manual and automatic methods dramatically shrink the final bundle (e.g., from ~320 KB to ~167 KB, a ~50 % reduction). Manual DLLs give faster builds but require extra maintenance, while automatic splitting offers a hands‑off solution once the strategy is configured.

Conclusion

Choosing between manual DLL extraction and automatic SplitChunks depends on project size, build frequency, and team preferences. Understanding the underlying principles, configuration options, and trade‑offs enables developers to optimize Webpack bundles effectively.