Open1
なぜViteを使うのか ーVite公式ドキュメントまとめ
Kohki_Takatamaはじめに
なぜViteが使われるのか、どんな特徴を持つのか
以下の公式ドキュメントから抜き出してまとめます。
※日本語の意味が通る限り、Google翻訳を使用します。
前提：Viteとは？
"Vite"はJavaScriptの「ビルドツール」です。読み方は「ヴィート」
「ビルドツール」の機能は以下
JSのビルドでは、下記のような処理が行われる。
- トランスパイル
TypeScriptやJSXといった非JSの言語をJSに変換したり、新しいJSの文法を古いブラウザでも動くように変換したりする作業- モジュール結合、tree shaking、コード分割
バラバラになっている各モジュールのファイルを結合して、一つのJSファイルにする。また、その過程で、未使用のモジュールなどを取り除く(tree shaking)。さらに、必要に応じて、適切な分割単位でJSファイルを分割する- ミニファイ
変数名の短縮やスペースの削除により、できるだけファイルサイズを小さくする
Vite以前の問題点
- ESモジュール以前、JavaScriptをモジュール化するネイティブメカニズムがなかった
※ESモジュール：JSについて決める「ECMAScript 2015」で策定された仕様
※モジュール化：ざっくり言えば「ファイルを分けて開発すること」 - → webpackなどのツールが登場
- しかし、これらのツールによるボトルネックが発生（大規模プロジェクト）
- 開発サーバーの起動に数分かかる
- ファイルの編集がブラウザに反映されるまでラグがある
※webpackには「HMR（ホットモジュール置換）」と呼ばれる仕組みがある。
これは「完全なリロードをせず変更したモジュールのみ置き換える」ものだが、これでもなおラグが発生する。
Viteの場合：開発サーバー起動時間の短縮
-
依存関係・ソースコードの2つのカテゴリに分割し、開発サーバー起動時間を短縮
-
依存関係は"esbuild"を使用し、事前にバンドルする。esbuildはGoで記述されており、JSベースのバンドラーより10 ~ 100倍高速
-
ソースコードは頻繁に編集され、JSXやTSなど非バニラなJSが含まれることが多い
-
Viteでは、ネイテイブESM経由でソースコードを提供する。これにより、ブラウザがバンドラーの仕事の一部を引き継ぎ、リクエストに応じて必要な部分だけを提供する
※以上は開発環境の話であり、本番環境では依然として「事前にバンドルする」方が適切