Webpack production plugin to only emit changed files.

Why?

When your app bundle is overwritten - even when maintaining the same file name - the server might see the file is changed (e.g. by modified date). A client browser will request the file and the server will tell the browser that the file changed. Which results in the browser downloading, interpreting and compiling your JS, every time the app is started.

See https://v8.dev/blog/code-caching-for-devs.

Using this plugin, identical files won't be modified: No new date, no new ETag, so your app will be browser cache friendly. This will grant your web app faster load times and less data usage.

🔥

npm i -D emit-changed-only-plugin

Important! Use the webpack substitute [contenthash] in your filename. This is used to compare file versions.

// webpack.production.js

const EmitChangedOnlyPlugin = require("emit-changed-only-webpack-plugin");

module.exports = {
  // ... webpack config

  output: {
    path: "./dist",
    /**
     * Use a hashed webpack substitute to generate a filename.
     * [contenthash] is recommended because the hash represents file contents.
     */
    filename: "[name].[contenthash].js"
  },
  plugins: [
    new EmitChangedOnlyPlugin({
      exclude: /\.html/i
    })
  ]
};

You can pass some settings, but this should generally not be necessary.

The plugin will attempt to keep your distribution directory clean, by removing outdated, previously built files. So you won't have to - and should not - clear your distribution directory. To keep certain files from being deleted, you can add them to the exclude setting.