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 コンポーネントの