webpackのbuildのキャッシュ、checksumを保存して一致してたら実行しないといった仕組みを用意しないといけないのかなと思っていたのですが、webpack v5からはpersistent cachingの機能が追加されていて簡単にキャッシュして高速化できたのでメモ📝

↓公式ドキュメントはこちら

persistent cachingでbuild結果をcacheする

やり方は簡単で以下のようにcacheの設定をしてあげるだけです。 type: "filesystem"を指定し、buildDependenciesのconfig: [__filename]を指定してあげることでファイルにcacheすることができるようになります。 ※デフォルトではnode_modules/.cache/webpackにcacheが保存されます。

process.env.NODE_ENV = "test";

const { merge } = require("webpack-merge");
const common = require("../../webpack.common.js");

module.exports = merge(common, {
  mode: "production",
  cache: {
    type: "filesystem",
    buildDependencies: {
      config: [__filename],
    },
  },
});

個人のWebサービスでの計測結果ですが、cacheによってbuild時間が結構に早くなりました🚀 ※webpack 5.73.0を使用

# no cache
$ yarn build:test
✨  Done in 11.23s.

# cached
$ yarn build:test
✨  Done in 1.10s.

CircleCIでwebpackのbuild結果をキャッシュして高速化する

ファイルにcacheすることによりCIでcacheを利用し、差分がなければcacheを利用することで高速化が出来ました。以下がCircleCIでwebpackのchacheをCIでcacheして利用するようにしてみたサンプルです。

commands:
  build_webpack:
    steps:
      - restore_cache:
          keys:
            - v1-webpack-cache-{{ .Branch }}-{{ .Revision }}
            - v1-webpack-cache-{{ .Branch }}-
            - v1-webpack-cache-
      - run:
          name: build webpack
          command: yarn build:test
      - save_cache:
          key: v1-webpack-cache-{{ .Branch }}-{{ .Revision }}
          paths:
            - ./node_modules/.cache/webpack