Vite にたどり着くまで（Webpack 以降のモジュールバンドラー振り返り）
ishiyama初めて spa フレームワークを導入したとき、webpack の設定にとても苦労した記憶がある。
だが、そんな webpack の地位を脅かす次世代のビルドツールが Vite（らしい）
はっきり言って、ビルド周りは情報収集サボっていたので、この機会に知識をアップデートしたい。
ishiyamaVite（フランス語で「素早い」という意味の単語。ヴィートと発音）
Vite を調べる前に見ぬふりをしてきたここあたりは押さえておいた方が良さそう。
- Parcel
- Rollup
- esbuild
ishiyamaParcel
Webpack は設定の記述に学習コストがかかるが、Parcel はそれが不要。
プロジェクトの規模感が見えていて、手軽にバンドルしたいなら Parcel を選択しても良さそう。
逆に細かい制御を入れたい場合は選択しないほうが良い。
ishiyamaRollup
Webpack は CommonJS（require/module.exports） をベースにバンドルを行うが Rollup は ES Modules（import/export） の仕組みを活かしてバンドルを行う。
ES Modules のほうがツリーシェイキングがやりやすくバンドル効率が高いらしい。
また、多くの記事で「アプリケーションには Webpack」「ライブラリには Rollup」を選択することを勧めている。
これは以下の理由が大きいと思われる。
全てのコードを同じ場所に置いて、一括で評価を行います。そのため、コードが簡潔でシンプルになり、起動速度が向上します。
一方で短所もあります。コード分割は厄介な問題を引き起こす可能性があり、Rollupの記述時にはサポートされません。
現在はコード分割にも対応しているようで、アプリケーションでも高い効果を発揮するかもしれない。
（※ 有識者コメント求む）
React.js 公式 にも Rollup も Webpack と同じ記述でコード分割ができると書かれている。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
esbuild
Webpack よりも10倍～100倍高速らしい。
ほとんどのビルドツールは js で書かれているが、esbuild は go で書かれているので速い。
ネイティブコードに変換したり、並列処理でゴリゴリに処理を回してるらしい。
DXが向上したなど、ポジティブな内容の記事が多く、期待値の高さが窺える。
まだメジャーバージョンはリリースされておらず、production ビルドとして使用するには少し不安が残る。
ishiyamaVite の概要を掴むのに以下のブログが良かった。
開発時は esbuild を使い爆速ビルド。production ビルドには安定している Rollup を使用する。
そしてコンフィグ周りの複雑性を吸収していて、初めから設定なしで動くと。
ishiyamaPercel、Rollup、esbuild の良いとこどりしたツールという印象。
公式は以下（日本語訳があるのが嬉しい）
作者は Evan You さんなので Vue.js とは相性が良さそう。
会社の Vue で作ってるプロジェクトを 3系にアップデートするとき提案してみようかな…
ishiyamaTypeScript と Vite
サポートはしているが、タイプチェックには対応していない。
実際に開発で Vite を利用している記事を見ると、別窓で tsc --watch による監視を行なっているようだ。
production ビルドではビルド前に tsc --noEmit を使用してタイプチェックすると良いだろう。
ishiyamaReact.js と Vite
create-react-app で作成した雛形に手を入れることで問題なく使用できそうだ。
開発環境の立ち上げが爆速で開発体験が上がったという記事をよく見かけた。
ishiyamareact-react-app を使用しなくても vite に付属してある cli から雛形を作成できるそう。
npm create vite@latest
ishiyamaVue.js と Vite
Vite は Vue に対して最高のサポートをします。
とのこと。
Vue.js と製作者も一緒だしシナジーも効きそう。
React.js と同様に cli から雛形が作成できる。
npm create vite@latest
または
npm create vite@latest my-vue-app -- --template vue
コミュニティテンプレート
cli で作成される雛形はフレームワークの基礎的な部分しか含まれておらず、Vite をテストしたかったり、スモールスタートしたい場合は適切だが、最初から機能が盛り込まれたテンプレートも下記のようなサイトで管理されており、degit などでスキャフォールディングすることができる。
ishiyamaesbuild vs parcel vs rollup vs vite vs webpack
ishiyama今回発表されたTurbopackは、代表的なバンドルツールの1つであるWebpackの開発者Tobias Koppers氏らがVercelに参加して開発したものです。同社はWebpackの後継がTurbopackであると説明しています。
大規模なアプリケーションでは、TurbopackはViteよりも10倍速く、Webpackの700倍も高速です。
Rust製の次世代バンドルツール…本命間ある、、
ishiyama遅れてきた主人公の感じある「Turbopack」の登場でバンドルツール市場はさらにカオスな状態に。
特段こだわりがなければwebアプリに関してはwebpackで静観し、NEXT王道が見えてきたらそれに乗り換える感じが良さそう。
ishiyamaRolldown
ネイティブレベルのパフォーマンス、パース / シリアライズのオーバーヘッドを回避する組み込みのトランスフォーム、Rollup との互換性を持つプラグインインターフェース、大規模アプリケーションに適した高度なビルド出力制御を提供する単一のバンドラを目指しています。