Optimizing Webpack Hot Module Replacement Speed: Plugins, Sourcemap, runtimeChunk, and Multi‑Page Strategies

Before discussing hot update optimization, we briefly explain the principle of webpack hot module replacement (HMR): webpack-dev-server creates an express server for static assets and a socket server for a persistent WebSocket connection; when a module changes, the socket server sends a manifest JSON and an update chunk to the browser, which loads them via the HMR runtime.

To analyze update speed we use speed-measure-webpack-plugin, which reports the execution time of each loader and plugin, helping identify bottlenecks.

Installation:

npm install --save-dev speed-measure-webpack-plugin

Usage example:

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
module.exports = {
  publicPath: "./",
  configureWebpack: (config) => {
    return smp.serve({
      // ...
    });
  },
};

Result shows that CompressionPlugin consumes ~7.2 s in development; disabling it in dev speeds up HMR.

Optimization steps

1. Disable CompressionWebpackPlugin in development:

plugins: [
  (isProduction
    ? new CompressionWebpackPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.(js|css)(\?.*)?$/i,
        threshold: 2048,
        minRatio: 0.8,
        deleteOriginalAssets: false
      })
    : undefined)
].filter(Boolean)

2. Choose an appropriate sourcemap. For Vue CLI 5 the recommended eval-cheap-module-source-map offers full source mapping with the fastest build speed. Other options (source-map, eval, inline-source-map, etc.) are listed with their trade‑offs.

3. Set runtimeChunk to "single" to extract runtime code into a separate file, improving cache stability and HMR speed. Example configuration:

module.exports = {
  configureWebpack: {
    optimization: {
      runtimeChunk: "single"
    }
  }
};

4. Reduce the number of pages processed by HMR. Use babel-plugin-dynamic-import-node to transform dynamic imports into static requires in development, and optionally register only the routes needed for the current module.

Installation:

npm install babel-plugin-dynamic-import-node --save-dev

Configuration (babel.config.js):

module.exports = {
  presets: ['@vue/app'],
  env: {
    development: {
      plugins: ['dynamic-import-node']
    }
  }
};

Conditional route registration example:

const routes = process.env.VUE_APP_MY_MODEL === "myMoudle"
  ? [{ path: "/mypath", name: "myPathName", component: myCom }]
  : [...]; // full routes

By applying these optimizations, hot update time can be reduced to under 1 second, dramatically speeding up development iteration.