Webpackerのビルド高速化

いくつか試したことまとめ。各詳細は公式のドキュメント読もう。

SplitChunks有効化

Webpacker4で使える追加機能。
宣言はconfig/webpack/environment.jsに1行追記するだけ。

config/webpack/environment.js

environment.splitChunks()

呼び出し用のタグを***_pack_tagから***_packs_with_chunks_tag変更。

app/views/layouts/test.slim

= javascript_packs_with_chunks_tag 'test'
= stylesheet_packs_with_chunks_tag 'test'

この状態でコンパイルすれば、SplitChunksで生成したファイルを読み込んでくれる。
コンパイル時.chunk.jsが生成されていればOK。

  js/*****.chunk.js   4.23 MiB

babel-loaderキャッシュ有効化

設定にcacheDirectoryオプションを追加。

config/webpack/loaders/babel.js

module: {
  rules: [
    {
      test: /\.(?:js|mjs|cjs)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true //これ
        }
      }
    }
  ]
}

/node_modules/.cache配下にキャッシュが生成されていればOK。

$ ls -l node_modules/.cache/
drwxr-xr-x - test test 2023-04-21 17:28 babel-loader

HardSourceWebpackPlugin導入

キャッシュを生成して、2回目以降のビルドを高速化してくれるらしい。

インストールして

　yarn add -D hard-source-webpack-plugin

設定ファイルにプラグインを追加する。

config/webpack/development.js

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

environment.plugins.prepend('HardSourceWebpackPlugin', new HardSourceWebpackPlugin());

こちらも/node_modules/.cache配下にキャッシュが生成されていればOK。

$ ls -l node_modules/.cache/
drwxr-xr-x - test test 2023-04-21 17:28 hard-source

SourceMap無効化

SourceMapは、コンパイル前とコンパイル後の対応関係を記したファイルなので、
デバッグとかで使っていたらこの対応はしない方が良いかも。

設定ファイルのdevtoolを弄るだけ。

config/webpack/development.js

environment.config.merge({
  devtool: 'none', //'inline-source-map'でSourceMap出力
});

コンパイル時、SourceMap(.map.js)が出力されなくなっていればOK。

ビルド速度比較

	1回目	2回目	3回目	4回目	5回目
適用前	93872ms	17328ms	13502ms	12905ms	11054ms
適用後	87756ms	17912ms	8260ms	9284ms	6872ms

2回目以降でキャッシュが上手いこと使えていると、早くなっているっぽい。
適当に小さい処理やログ出力挟んだ程度の変更なので、規模次第でどうなるまではまだ分からず。