Vue アプリのビルド プロセス: ロールアップとロールダウン

アンディ・リー著

ビルド ツールは、最新の Web 開発に不可欠であり、生のコードをブラウザーが理解して効率的に実行できるものに変換するエンジンとして機能します。高速で信頼性の高いビルド ツールがないと、開発サーバーを起動するときにイライラするほど長い起動時間に直面する可能性があり、単純なコード変更ですらブラウザに反映されるまでに貴重な数秒を要し、開発フローと生産性が中断される可能性があります。

この記事では、Vite、esbuild、Rollup、およびアップアンドRolldown と呼ばれる Evan You (Vue.js と Vite.js の作成者) によって構築されているツールです。

まず、Vite から始めましょう。

---

Vite の現在のビルド プロセス

他の多くのフレームワークと同様、Vue.js はビルド ツールとして Vite を使用しています。

Vite には、開発と運用という 2 つの異なるモードがあります。これらはバックグラウンドで別の方法で実装されます。

Vite は、開発環境と運用環境に異なるビルド戦略を使用して、それぞれの固有のニーズに合わせて最適化します。開発中は、スムーズな開発者エクスペリエンスを実現するために、迅速なフィードバックと迅速なホット モジュール交換 (HMR) を提供することに重点が置かれています。運用環境では、エンド ユーザー向けに最適化されたパフォーマンスの高いバンドルを生成することに優先順位が移ります。

Vite が開発ビルドをどのように処理するか、その革新的なアプローチが真価を発揮する場所を見てみましょう。

---

開発モードの Vite

開発モードでは、ビルド速度が非常に重要です。 Vite は、変更のたびにコードをバンドルするのではなく、変更されたファイルを ESM 形式 (Vue コンポーネントの <script> コードなど) で直接提供するため、最小限の処理でブラウザを迅速に更新できます。</script>

実際には、Vite は TypeScript コードをブラウザ互換の JavaScript に変換します。開発ビルドに必要な手順は実稼働環境 (すぐに説明します) よりも少ないですが、特に数秒以内に変更をブラウザーに表示する必要があるため、コードを迅速に変換することは依然として困難です。

Vite が Go で書かれた高性能ツールである esbuild を採用しているのはそのためです。 Go は機械語 (プロセッサが実行できる低レベルのバイナリ命令) に直接コンパイルするため、esbuild は並外れた速度を実現します。これは、最新の開発サーバー設定にとって重要な要件です。

---

実稼働モードの Vite

本番環境ではビルド速度が重要ですが、それは最優先事項ではありません。実稼働ビルドを作成する場合、ビルド ツールに関係なく、ある程度の待ち時間が発生することが予想されます。一度に 1 つのファイルとその依存関係のみを処理する開発モードとは異なり、運用ビルドではすべてのコードを最初からバンドルする必要があるため、インスタント ビルドは不可能です。

さらに、運用ビルドでは追加の手順が必要になることがよくあります。たとえば、古いブラウザ用に JavaScript コードをトランスパイルする必要がある場合があります。これは、最新のブラウザを簡単に使用できる開発中は不要です。

その他の重要な実稼働ビルド手順には、縮小化 (機能を維持しながらコードから不要な文字を削除する) とコード分割 (オンデマンドで読み込まれるコードを小さなチャンクに分割する) が含まれます。これらのプロセスは、コードの実行時のパフォーマンスに直接影響します。

実稼働ビルドの最優先事項は、ユーザーのブラウザでコードが効率的に実行されるようにすることです。ユーザーがサイトに頻繁にアクセスする一方で、実稼働ビルドは不定期に行われるため、これはビルド速度よりも優先されます。

Vite は、Vite で直接使用できる豊富なプラグイン エコシステムのため、本番バンドルに Rollup を選択しました。 Vite のプラグイン アーキテクチャは Rollup のアーキテクチャを反映しているため、この互換性はプラグイン コミュニティの繁栄を促進し、Vite の広範な採用に貢献しました。

?
要約すると: Vite は開発ビルドには esbuild (速度を最適化) を使用し、本番ビルドには Rollup (プラグインで知られる) を使用します。

このセットアップはうまく機能していますが、大きな変更が行われます。Vite はすぐに esbuild と Rollup の両方を Rolldown と呼ばれる新しいツールに置き換えます。

Rolldown について調べる前に、Rolldown の発明につながった Vite の現在のセットアップの課題を調べてみましょう。

---

Viteの問題点

ビルド ツールまたはバンドラーがソース コードを処理するとき、最初に抽象構文ツリー (AST)、つまりコードの構文と構造を表すツリー状のデータ構造が作成されます。たとえば、関数宣言は AST の「FunctionDeclaration」ノードになり、パラメーターと本体の子ノードが含まれます。

同じソース コードを解析するために 2 つの異なるツールを使用することは、単一のツール (または互換性のあるツールのセット) がプロセス全体を通じて解析結果を再利用できるため、コード変換の効率が悪くなります。

esbuild は Vite の開発モードを処理しますが、縮小化を通じて実稼働モードでも役割を果たします。これは、esbuild と Rollup がビルド プロセスで連続して動作することを意味します。 React アプリケーションの場合、esbuild と Rollup に加えて SWC (Rust で書かれた別のビルド ツール) が追加されるため、プロセスはさらに複雑になります。

複数のツールを順番に使用すると、各ツールが個別にコードを解析し、ツール間で結果を渡す必要があるため、非効率が生じます。 Rollup の堅牢なプラグイン エコシステムは実稼働ビルドに価値をもたらしますが、esbuild と比較して速度が遅いため、トレードオフが生じます。理想的なソリューションは、esbuild のパフォーマンスと Rollup の拡張性を組み合わせたツールです。これはまさに Rolldown が達成しようとしていることです。

---

ロールダウンの概要

Rolldown は、Go と同様に直接マシンコードにコンパイルされるプログラミング言語である Rust で書かれたバンドラーです。これは、Rolldown が esbuild と同様の速度を達成することを意味します。

Rolldown は Rollup と同様のプラグイン API を共有しているため、既存の Vite 互換プラグインのほとんどは、Rolldown を搭載した新しいバージョンの Vite とシームレスに動作します。

本質的には、パフォーマンスが向上するだけで、現在と同じように Vite を使用できるようになります。

では、どれくらい高速になっているのでしょうか? 速度が主なセールスポイントである場合、新しいツールの採用を正当化するには、大幅に高速化する必要がありますよね?

Evan You によるベンチマークによると、Vue のコア ソース コードのバンドル速度をテストする場合、ロールダウンのビルド セットアップはロールアップ ベースのセットアップより 7 倍以上高速に実行されます。

このベンチマークは、特に本番環境のビルド時間を測定します。 開発についてはどうですか?

現在、Vite は開発に esbuild を使用しています。 Evan You のベンチマークによると、Rolldown は esbuild のほぼ 2 倍の速度で実行されます。 esbuild はすでに高性能であるため、この改善はロールアップ比較よりも控えめです。

これらのパフォーマンス アップグレードはすべて、ロールダウンの基礎となるツール スイートによって強化されています。これらには、新しいパーサー、リンター、リゾルバー、トランスフォーマーなどが含まれており、これらはすべて Oxc プロジェクト (Rolldown チームによって作成) の一部です。

Oxc は JavaScript 言語ツールのセットです。これらのツールはロールダウンで使用されますが、ロールダウン以外のコンテキストで個別に使用することもできます。たとえば、Oxc リンターは ESLint よりも高速であるため、CI ワークフローで使用して、ESLint を実行する前にコード エラーをすばやくキャッチできます。

Oxc ツールは、パフォーマンスを主な目標としてゼロから作成されているため、一般に他の同様のツールよりも高速です。

---

ヴィテの未来

Rolldown はまだ本番環境に対応していませんが、Rolldown の統合を特徴とする Vite のアルファ リリースは 2024 年末までに予定されています。今後数か月間、Vue、Vite、Rolldown の最新開発について引き続きレポートしていきます。

Vite についてさらに詳しく知りたい場合は、Vite の作成者である Evan You 自身が教える Vue Mastery のコース「Lightning Fast Builds」をご覧ください。

元々は、2024 年 12 月 4 日に https://www.vuemastery.com で公開されました。

---

以上がVue アプリのビルド プロセス: ロールアップとロールダウンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。