この記事を3行で
- Viteの速さの秘訣と、webpackと比較してどのくらい速くなるか比較
- ホットリロードの時間は87%削減、開発サーバーの立ち上げ時間は89%削減、ビルドの時間は74%削減できた
- 今回対象のSPAにおいてFCP（First Contentful Paint）は速くならなかった
はじめに
2019年にCreate React App（CRA）で作成された大規模Webアプリケーション（SPA）をViteに移行したら、めちゃくちゃ速くなりました。何がどのくらい速くなったのか、なぜ速くなったのかを見ていきましょう！
前提条件
- vite: v5.3.4
- webpack: v4.44.2
- react-scripts: v4.0.3
- 開発規模
- 全体で95画面
- src以下のコード 74,771行
- src以下のファイル 1,156個
ホットモジュールリロード
webpack: 8秒 → vite: 1秒
なんでこんなに速いの？
ネイティブ ESMが速さの秘訣です！
最近のブラウザはES modulesのコードを直接実行できるから、viteはバンドルせずにブラウザに渡しています。
なので、コードが変更されたモジュールだけをブラウザに再送信するだけで良いのです！
変更されてないモジュールのリクエストには304 Not Modified ヘッダー使ってキャッシュすることで高速化しています！
webpackは変更されたモジュールと他のモジュールをバンドルしてブラウザに渡しているので、コードが大きければ大きいほど遅くなってしまいます。
開発サーバーの立ち上げ
初回 webpack: 92.6秒 → vite: 9.5秒
2回目 webpack: 30.2秒 → vite: 6.3秒
-
上:webpack 下:vite （初回）
-
上:webpack 下:vite （2回目）
なんでこんなに速いの？
バンドル戦略が速さの秘訣です！
npmパッケージなどの依存関係は事前にバンドルしておいて、私たちが書くソースコードはバンドルしません。webpackは全てバンドルするけどviteはしません！
そして、ルーティングなどによって必要になるモジュールのみを処理する事で開発サーバーの立ち上げを高速にしているのです！
ビルド
webpack: 1分13.70秒 → vite: 18.527秒
上:webpack 下:vite
なんでこんなに速いの？
Rollupを使ってることが速さの秘訣です！RollupはTree-shakingとコード分割を効率的に行いつつ、使ってないコードを削除することでビルド時間を大幅に短縮しています！
速くならなかったもの
今回対象のSPAにおいてFCP（First Contentful Paint）は速くなりませんでした。
理由は、Viteのデフォルト設定ではSPAのchunk分割が最適化されていなかったのです。
ただ、Viteでchunk分割をマニュアルで設定することは簡単なので、Dynamic importと組み合わせたchunk戦略を使えばFCPも改善できます！