2024年第1四半期ビルドツール探訪
昨今のフロントエンドビルドツールの実態を探ります。
極力考察・主観なしで、各ツールの関係性を整理していきます。
（各ツールは、現在高速化が進んでいますが「高速さ」は主観によるところも大きいため各公式の謳い文句を元に記述しています）
また、非常に読みにくいですが一次ソースとして各公式ドキュメントのソースなどを参照しています。
Next.js
現在主流のフロントエンドフレームワークの中でも、最もダウンロード数が多いフレームワークです。
Next.jsではデフォルトで
が採用されています。
また、オプションとしてBabelをトランスパイルに、バンドラにTurbopackを利用することもできます。
SWC
Rust製の高速なトランスパイラです。
TypeScriptのトランスパイルや、Babelのようなブラウザの環境に応じたトランスパイルも可能です。
また、SWCは細かくパッケージが分割されているために、Denoや、後述のTurbopackやRollupでも利用されています。
webpack
webpackは、JavaScript製のビルドツール（バンドラ）です。
登場は10年以上前ですが、SWC公式のswc-loaderなどと組み合わせて、現在でも高速にビルドすることができます。
上記swc-loaderなど、設定によってはTypeScriptのトランスパイルを行えますが、webpack単体としてはトランスパイルの機能は持ちません。
Babel
Babelは、ES2015以降のコードをES5相当のコードにトランスパイルすることが可能なトランスパイラです。
JSXやTypeScriptもプラグインによってトランスパイルすることができます。
Turbopack
Turbopackは、Vercelによりwebpackの置き換えを目指し開発されているバンドラです。
Rust製のバンドラで、高速なビルドが可能です。
内部ではSWCが使用されています。
すでにNext.jsで利用可能ですが、未だexperimentalとなっています。
Vite
フレームワークの中でも最もダウンロード数の多いNext.jsを抜くほどの人気を誇るビルドツールです。
NuxtやSvelteKitなどのフレームワークの中でも、Viteが採用されています。
Viteではトランスパイラにはesbuildが採用されています。
プラグインを用いることで、Babelなどのトランスパイラを用いることも可能です。
Viteでは、開発モードと本番モードでバンドルの方針が異なります。
| 開発モード | 本番モード | |
|---|---|---|
| 依存関係(node_modules) | esbuild | Rollup |
| ソースコード(srcなど) | - | Rollup |
開発モードでは、ソースコードはnative ESMとしてブラウザに配信されるため、バンドルされません。
（ここで注意しておきたいのは、トランスパイルには開発・本番モードともにesbuildが利用されているということです）
このように、2種のバンドラに依存し開発時と本番時で差分が存在していることが課題視されており、柔軟性と速度を持ち合わせたRolldownというバンドラの開発も進んでいます。
esbuild
Go製の高速なトランスパイラです。
SWC同様、TypeScriptのトランスパイルや、Babelのようにブラウザの環境に応じたトランスパイルも可能です。
Rollup
JavaScript製のバンドラです。ES Modulesに特化しつつ、プラグインによりCommonJSなどもサポートしています。
最新のRollup 4では、JavaScriptのパースにSWCが利用され、一部Rustで置き換えることにより高速化を図っています。
SWCのパーサーを利用しているものの、JavaScriptのパースに特化しており、TypeScriptのトランスパイルには別途プラグインの利用が必要です。
その他
Remix
Next.jsと同じく、Reactのフレームワークです。
バンドル・トランスパイルとも、esbuildが利用されています。
最近では、Viteのサポートも進み、将来的にはViteに移行することが公式で示唆されています。
Rspack
Turbopackと同じく、webpackを意識してRustで開発されているバンドラです。
Turbopackがwebpackとの互換性を一部諦めているのに対し、Rspackは高い互換性を実現しています。
内部的にはSWCが利用されています。
まとめ
メジャーなフロントエンドフレームワークのビルドツールを中心に、現在のビルドツールの実態を探りました。
最後に、各ビルドツールの関係性を整理してみます。
Discussion