Aurelia 1開発用のWebpackを高速化する

Before

yarn start  # (webpack + tsc)

# webpack 5.99.9 compiled successfully in 11500 ms

After

yarn start  # (webpack + cache + tsc + ForkTsCheckerWebpackPlugin)

# 1st run: webpack 5.99.9 compiled successfully in 6177 ms
# 2nd run: webpack 5.99.9 compiled successfully in 1195 ms  (960% speed up!)

どうやった?

webpack.config.jsにファイル・キャッシングとForkTsCheckerWebpackPluginを入れて、2回目以降の実行が9.6倍に高速になりました。私はWebpack 4から上げたので、ファイル・キャッシングに気がつきませんでした。

ForkTsCheckerWebpackPluginはts-loader （TypeScriptトランスパイラーのフロントエンド）にtranspileOnly: trueを強制してトランスパイルを高速化し、型チェックは別のスレッドで実行します。

yarn add -D fork-ts-checker-webpack-plugin

- webpack.config.js

import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';  //***
...

export default ({ production }, { analyze, hmr, port, host }) => ({
  cache: {
    type: 'filesystem',
  },

  // ...other config such as ts-loader

  plugins: [

    new ForkTsCheckerWebpackPlugin({
        typescript: {
          diagnosticOptions: {
            semantic: true,
            syntactic: true,
          },
        },
    }),

また、aurelia_project/aurelia.jsonでHot Module Reloading (HMR)を有効化すると、ファイルの変更時にブラウザーが変更部分だけを更新します。

- aurelia_project/aurelia.json

"platform": {
  "hmr": true
}

他に試したこと

上記のようにWebpackの起動で1秒かかって、以後の作業ではHMRで0.2秒くらいです。私としてはこれで十分満足しています。ここに辿り着くまでに結構な回り道をしたので、それも紹介します。

🔸 thread-loader (TypeScriptコンパイラを並列化する)

yarn start  # (webpack + cache + transpileOnly + thread-loader + fork-ts-checker-webpack-plugin + tsc)

# 1st run: webpack 5.99.9 compiled successfully in 6775 ms
# 2nd run: webpack 5.99.9 compiled successfully in 1061 ms

効果なし。

🔸 tsgo (Goで書かれたTypeScript compiler)]

tsgoはTypeScript 7で登場する予定の処理系で開発途上です。とても速いですが、まだ@autoinject(TypeScript API)をサポートしていないようです。他にも多数の未実装の機能があります。

🔸 Webpack + esbuild (Goで書かれたTypeScriptのトランスパイラー)

yarn start

# webpack 5.99.9 compiled successfully in 6333 ms

そんなに速くなく、むしろ遅くなりました。

tsconfig.jsonに"experimentalDecorators": trueがあるにもかかわらず@autoinjectがコンパイルされなくて、アプリケーションが動きませんでした。

🔸 Vite + esbuild

❌ vite-aurelia-pluginプラグインはAurelia 1をサポートしていません。

🔸 Rspack (Webpackと互換性が高いと言われるRustで書かれたバンドラー)

RspackはWebpackと近いAPIを提供しています。

残念ながら、aurelia-webpack-pluginは動きませんでした。Rspackに移植することを考えましたが、APIの相違が大きくてやめました。

結論

Webpack 5で導入されたキャッシングでコンパイル時間が劇的に短くなりました。難しいことを考えずに済むこれが1番です。