webpackの公式guideで紹介されたthread-loaderを使って並列buildしてみたのでやり方とか結果をメモ📝

The thread-loader can be used to offload expensive loaders to a worker pool. https://webpack.js.org/guides/build-performance/#worker-pool

前提

webpack@5.74.0
ts-loader@9.3.1
babel-loader@8.2.5

thread-loaderとは

以下で紹介されている特定のloaderを並列実行できるloaderです。

webpack.js.org

当たり前ですが警告の通りなんでもかんでも並列にすれば良いわけではなく、一定のオーバーヘッドがあるので特定のコストの高いloaderに限ってのみ使用することが推奨されています。

Warning
Don't use too many workers, as there is a boot overhead for the Node.js runtime and the loader. Minimize the module transfers between worker and main process. IPC is expensive.
https://webpack.js.org/guides/build-performance/#worker-pool

thread-loaderを使った並列buildのやり方

今回はTypeScriptとbabelの一番メインのbuildで時間が掛かってそうなのでthread-loaderで並列で処理するようにしてみます。やり方は並列化したいloaderの前でthread-loaderの設定を入れてあげるだけです。 ※defaultのthread-loaderの並列数(workers)はCPUの数-1になるようです。

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "thread-loader",
          },
          {
            loader: "babel-loader",
          },
        ],
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "thread-loader",
          },
          {
            loader: "ts-loader",
            options: {
              appendTsSuffixTo: [/\.vue/],
              transpileOnly: true,
              happyPackMode: true,
            },
          },
        ],
      },

ts-loaderでthread-loaderを使うには以下の通りhappyPackModeをtrueにしないと行けないようなのでtrueを設定するようにしています。

happyPackMode
If you're using HappyPack or thread-loader to parallelise your builds then you'll need to set this to true. This implicitly sets transpileOnly to true and WARNING! stops registering all errors to webpack.
https://github.com/TypeStrong/ts-loader#happypackmode

結果

以下の通り2秒ぐらいは早くなってそう。

// before
$ for counter in {1..5}; do yarn build; done
✨  Done in 19.20s.
✨  Done in 20.91s.
✨  Done in 18.89s.
✨  Done in 18.08s.
✨  Done in 19.08s.

// after
for counter in {1..5}; do yarn build; done
✨  Done in 16.51s.
✨  Done in 16.59s.
✨  Done in 16.78s.
✨  Done in 16.55s.
✨  Done in 16.66s.