Viteのコアマジック esbuildとネイティブESMによるフロントエンド開発の再発明

はじめに

フロントエンド開発の状況は常に進化しており、開発者はより速く、より効率的なワークフローを求めています。従来のバンダーは、強力ではありますが、特に大規模なプロジェクトでは、起動時間の遅さやホットモジュール置換（HMR）の遅さに悩まされることがよくあります。このオーバーヘッドは、生産性と開発者体験を著しく妨げる可能性があります。Viteは、このパラダイムに革命をもたらすことを約束する次世代フロントエンドツールです。最新のブラウザ機能と高度に最適化されたネイティブツールを活用することで、Viteは、インスタントなサーバー起動と超高速なHMRを特徴とする比類のない開発体験を提供します。この記事では、Viteの成功の背後にあるコア原則を探り、特に依存関係のプリバンディングのためのesbuildと効率的なホットモジュール更新のためのネイティブESMの独創的な使用に焦点を当てます。

Viteのイノベーションを理解する

Viteの仕組みを詳しく見ていく前に、そのアーキテクチャの基盤となるいくつかの重要な概念について共通の理解を確立しましょう。

主要な用語

ES Modules (ESM): JavaScriptにおけるモジュールの公式標準。ESMはモジュラーコード編成を可能にし、開発中にバンダーを必要とせずにブラウザでimportおよびexportステートメントを可能にします。これはViteのサーバー中心アプローチの重要な基盤です。
CommonJS (CJS): 主にNode.jsで使用されるモジュール形式。多くのnpmパッケージは依然としてCJS形式で公開されています。
バンディング: 複数のJavaScriptファイルとその依存関係を1つまたは少数の出力ファイルに結合するプロセス。これは通常、ブラウザへの最適化された配信のために行われます。
プリバンディング: Viteが起動中に特定の依存関係（特にCommonJSモジュールまたは多数の内部依存関係を持つモジュール）を積極的にバンドルする最適化ステップ。この前処理は、非ESM形式をESMに変換し、依存関係グラフをフラット化するのに役立ちます。
ホットモジュール置換 (HMR): アプリケーションの状態を維持したまま、実行中のアプリケーションでモジュールのライブ更新を可能にする機能。

従来のバンダーの問題点

WebpackやRollupのような従来のバンダーは、アプリケーショングラフ全体を事前に構築します。これには、すべてのimportおよびrequireステートメントをトラバースし、JavaScriptを変換し、さまざまな最適化を実行することが含まれます。大規模なアプリケーションでは、この「まずバンドル」アプローチは以下につながります。

遅いサーバー起動: 開発サーバーは、アプリケーション全体がバンドルされるまで完全に準備ができません。これには数秒、さらには数分かかることがあります。
遅いHMR: 小さな変更でさえ、バンダーはアプリケーションの大部分を再バンドルする必要がある可能性があり、HMRが有効になるまでに目に見える遅延が生じます。

Viteの解決策: プリバンディングにesbuildを活用する

Viteは、「まず提供し、オンデマンドでバンドルする」戦略を採用することで、遅いサーバー起動の問題に取り組みます。これは、Goで書かれた非常に高速なJavaScriptバンダーおよびミニファイアであるesbuildを活用します。

なぜesbuildなのか？

esbuildは、JavaScriptベースのバンダーよりも桁違いに高速です。その速度は、Goで書かれていること、並列処理の多用、効率に焦点を当てた設計に由来します。Viteはこの速度を2つの主な目的で活用します。

依存関係のプリバンディング:
- 多くのnpmパッケージはCommonJSとして、または多数の内部モジュールを持つものとして公開されています。
- これらをネイティブESMとして直接提供することは非効率的であり、多数のHTTPリクエスト（各モジュールごとに1つ）や、ブラウザでのCJSスタイルのインポートの問題につながる可能性があります。
- Viteはesbuildを使用してnode_modulesを依存関係のためにスキャンします。その後、これらのサードパーティ依存関係を、変換なしのプレーンJavaScriptの単一ESMファイル（または少数のファイル）にバンドルします。
- このプロセスはCommonJSモジュールをESMに変換し、ブラウザの互換性を確保し、リクエスト数を減らします。また、複雑な依存関係グラフを単純なものにフラット化します。
- このプリバンディングは、依存関係が変更された場合、または最初の起動時にのみ発生します。プリバンドルされたキャッシュが使用されるため、後続の起動は瞬時に行われます。
例: CommonJSライブラリlodashをインポートするmain.jsを考えてみましょう。
```
// main.js
import _ from 'lodash';
console.log(_.get({a: 1}, 'a'));
```
プリバンディングなしでは、lodashはブラウザがネイティブに理解しないCJSとして提供されます。Viteのesbuildプリバンディングステップは、lodash（および他のnode_modules依存関係）をESM形式に変換します。main.jsがlodashをリクエストすると、Viteはこのリクエストをインターセプトし、node_modules/.vite/deps/lodash.jsからプリバンドルされたESMバージョンを提供します。

ブラウザのネットワークタブには、lodashが個別のCJSモジュールとして提供された場合の数百もの小さなファイルではなく、lodash.jsに対する単一のリクエストが表示されます。

Viteの解決策: ホットモジュール置換のためのネイティブESM

Viteは、開発中に明示的なバンディングを完全に迂回することで、信じられないほど高速なHMRを実現します。代わりに、ソースファイルをネイティブESMとしてブラウザに直接提供します。

仕組み:

ブラウザがソースファイルをリクエストする: ブラウザがmain.jsをリクエストすると、Viteはこのリクエストをインターセプトします。main.jsがESMファイルであるため、Viteはこれを直接提供します。
インポートの書き換え: Viteは、ベアモジュール指定子（例:import 'lodash'）を、ブラウザが解決できる有効なパス（例:import '/node_modules/.vite/deps/lodash.js'）に書き換えます。
WebSocket経由のHMR: Viteは、モジュールにクライアントサイドHMRコードを注入します。ソースファイルで変更が検出されると、Viteの開発サーバー（Koa上に構築されています）は次のことを行います。
- 変更されたモジュールを特定します。
- WebSocket経由でクライアントに変更のHMRアップデートメッセージを送信します。
- クライアントサイドのHMRランタイムは、Vite開発サーバーから更新されたモジュールをリクエストします。
- 重要：Viteは変更されたモジュールとその直接の依存関係のみを提供します。アプリケーション全体を再バンドルすることはありません。
- ネイティブESMの粒度の細かい性質により、正確な更新が可能になります。無効になったモジュールとそのコンシューマーのみが再評価される必要があり、アプリケーショングラフ全体ではありません。
例:

App.vueがButton.vueをインポートしているとしましょう。
```
// App.vue
<script setup>
import Button from './Button.vue';
</script>
<template>
  <Button />
</template>
```
```
// Button.vue
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
  <button @click="count++">Count: {{ count }}</button>
</template>
```
Button.vueを変更すると：
- ViteはButton.vueの変更を検出します。
- Button.vueが更新されたことを示すHMRメッセージをブラウザに送信します。
- ブラウザのHMRランタイムは、Button.vueの新しいバージョンをimportします。
- Button.vueはネイティブESMモジュールであるため、ブラウザは独立してこの新しいバージョンをロードできます。VueのHMR統合は、元のcount状態をApp.vueで維持したまま、古いコンポーネントインスタンスを新しいものと優雅に置き換えます。
- Button.vueのみが再評価され、ほぼ瞬時にフィードバックが提供されます。

esbuildによる高速な初期依存関係最適化と、オンデマンド提供と粒度の細かいHMRのためのネイティブESMの組み合わせが、Viteにその卓越したパフォーマンスをもたらしています。

結論

Viteは、依存関係のプリバンディングにおけるesbuildの比類なき速度と、直接提供およびホットモジュール置換のためのESモジュールのネイティブパワーをスマートに組み合わせることで、フロントエンド開発体験を大幅に向上させます。このアーキテクチャは、従来のバンダーに伴う遅い起動とHMRという一般的な問題点を排除し、開発者にインスタントなフィードバックと非常に生産的なワークフローを提供します。Viteは単なるツールではなく、Web開発のより速く、より効率的な未来へのパラダイムシフトです。