esbuild導入検討

[qrac]

Viteなどに比べるとwebpackの遅さが気になるので、なるべく高速化したい。

esbuild-loaderをbabel-loader + ts-loaderの場合と比較したところ、3〜4割ほど速くなった。
※別件でswc-loaderを検証したときはと1割高速化

• https://github.com/privatenumber/esbuild-loader
• https://www.npmjs.com/package/esbuild-loader
• https://twitter.com/Qrac_JP/status/1482620810062106624
• Reactで書けるSSG 改善点と今後について - minista v1

仕組み上、爆速とまではいかなかったが導入してみたい。そのまま差し替えるとbabel-loader + ts-loaderを使っているプロジェクトとの互換性問題や新たな不具合が心配なので、CLIオプションで使用できると良いかもしれない。

[qrac]

esbuild-loaderはReactの自動インポートに対応していないため、ProvidePluginで挿入する必要がある。

const { ProvidePlugin } = require('webpack')

const webpackConfig = {
  plugins: [
    new webpack.ProvidePlugin({
      React: "react"
    })
  ]
}

module.exports = webpackConfig

• https://github.com/privatenumber/esbuild-loader#is-it-possible-to-use-esbuilds-inject-option
• ProvidePlugin | webpack

[qrac]

esbuildには公式のコンフィグファイルがないので、設定のオーバーライドについて考える必要がある。

• [Feature] Config file · Issue #39 · evanw/esbuild
• bpierre/esbuild-config: 📜 Config files for esbuild.

暫定的に非公式の esbuild.config.json でオーバーライドしてもらうことにして、もし公式のjsonファイルが登場したらどちらもサポートするという方法は取れる。

esbuildを使う場合は、条件分岐でbabel-loader + ts-loaderの設定をオフにしないとならない。派生プラグインを作って、それがインストールされている場合は 切り替えるなどの方法が考えられる。

[qrac]

現在の制作でビルド速度がそこまでボトルネックになっていないため保留とする。速度を重視するのであれば、Viteなどの爆速バンドラーベースの新構成に時間を割いた方が良いと考える。