WebpackからViteに移行するとどのくらい速くなるのか

この記事を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も改善できます！