Vite チームは、Vite 5.1 が正式にリリースされたことを正式に発表しました。
Vite (フランス語で「速い」を意味し、
/vit/「ヴィート」のように発音される) は、フロントエンド開発エクスペリエンスを大幅に向上させる新しいフロントエンド構築ツールです。主に次の 2 つの部分で構成されます。
驚くほど高速なホット モジュール アップデート (HMR) など、ネイティブ ES モジュールに基づいた豊富な組み込み機能を提供する開発サーバー。
ロールアップを使用してコードをパッケージ化し、運用環境向けに高度に最適化された静的リソースを出力するように事前構成された一連のビルド手順。
Vite は、プラグイン API と JavaScript API を通じて強力な拡張性を提供し、完全な型サポートを提供します。
Vite ランタイム API
Vite 5.1 では、新しい Vite ランタイム API の実験的サポートが追加されています。これにより、最初に Vite プラグインを使用してコードを処理してから実行できるようになります。server.ssrLoadModuleランタイム実装がサーバーから切り離されているため、これは大きく異なります。これにより、ライブラリとフレームワークの作成者は、サーバーとランタイムの間に独自の通信層を実装できます。新しい Vite ランタイム API は、安定化後に Vite の現在の SSR プリミティブ (サーバー側のレンダリング プリミティブ) を置き換えるように設計されています。
新しい Vite ランタイム API は、辰年に多くのメリットをもたらします。
-
SSR中のHMR（ホットモジュール交換）をサポート
-
サーバーから切り離されているため、単一サーバーを使用できるクライアントの数に制限はありません。各クライアントは独自のモジュール キャッシュを持ち、個人的な好みに応じて通信することもできます。メッセージ チャネル/
fetch呼び出し/直接関数呼び出し/WebSocket を使用します。 -
組み込み APIに依存しない
node/bun/denoため、あらゆる環境で実行できます。 -
コードを実行するための独自のメカニズムを持つツールと簡単に統合できます。たとえば、
eval代わりにを使用してランナーを提供できますnew AsyncFunction。
最初のアイデアは PP によって提案され、vite-nodeAntFu によってパッケージとして実装され、Nuxt 3 Dev SSR を駆動し、後に Vitest のインフラストラクチャとして機能しました。したがってvite-node、全体的な考え方は、「遠くからコードを理解する」という長期的なテストに合格しました。これは VS の API の新しいイテレーションです。 Vitest で再現されておりvite-node、Vite コア ライブラリに統合することで過去が変更され、Vite ランタイム API がより柔軟で強力になりました。この PR (プルリクエスト) は 1 年間待ち続けました。
関数
.css?urlサポートの向上
CSS ファイルを URL としてインポートできるようになりました。これは、Remix から Vite への移行における最後の障害です。
build.assetsInlineLimitコールバックがサポートされるようになりました
ユーザーは、特定のリソースのインライン化を有効または無効にするブール値を返すコールバック関数を提供できるようになりました。が返された場合undefined、デフォルトのロジックが適用されます。
ループインポート用の HMR の改善
Vite 5.0 では、循環インポートで受け入れられたモジュールは、クライアント側で正常に処理できる場合でも、常にページ全体のリロードをトリガーします。この問題は解消され、ページ全体を再ロードせずに HMR を適用できるようになりました。ただし、HMR 中にエラーが発生した場合、ページは再ロードされます。
ssr.external: trueすべての SSR パッケージの外部化をサポート
歴史的に、Vite はリンクされたパッケージを除くすべてのパッケージを外部化しました。この新しいssr.external: trueオプションを使用すると、リンクされたパッケージを含むすべてのパッケージを強制的に外部化できます。これは、すべての外部パッケージの一般的なケースをシミュレートしたいモノリポジトリ (マルチライブラリ開発) テスト、またはssrLoadModule任意のファイルを使用し、HMR を気にしないため常に外部パッケージを使用したい場合に便利です。
プレビューサーバーでcloseメソッドを公開する
プレビュー サーバーは、close開いているすべてのソケット接続を含め、サーバーを正常に破棄するメソッドを公開するようになりました。
パフォーマンスの最適化
Vite はリリースごとに高速化されており、Vite 5.1 にはパフォーマンスの最適化が満載されています。vite-dev-server-perfVite 4.0 以降の Vite のすべてのマイナー バージョンを使用して、2510K モジュール (レイヤー深度ツリー) のロード時間を測定しました。これは、Vite のパッケージ化されていないソリューションの有効性を測定するための優れたベンチマークです。各モジュールは、カウンタを保持し、モジュール ツリー内の他のファイルにインポートするミニ TS ファイルであるため、これは主に、個々のモジュールに対するリクエストを実行する時間のオーバーヘッドを測定します。 Vite 4.0 では、8薄くて軽いゲーミング ラップトップに 10K モジュールをロードするのに数秒かかります。パフォーマンスを重視した Vite 4.3 ではさらに優れており、6.35数秒でロードできます。 Vite 5.1 では、さらなるパフォーマンスの飛躍を達成しました。 Vite は5.35数秒で 10,000 モジュールを提供できるようになりました。
このベンチマークの結果は、バージョン ベンチマークの優れたソリューションである Headless Puppeteer で実行されます。しかし、これらはユーザーエクスペリエンスの長さを表すものではありません。 Chrome のシークレット ウィンドウで同じ数の 10,000 モジュールを実行すると、次のようになります。
| 10K モジュール | クイック5.0 | クイック5.1 |
|---|---|---|
| ロード時間 | 2892ミリ秒 | 2765ミリ秒 |
| 読み込み時間（キャッシュ） | 2778ミリ秒 | 2477ミリ秒 |
| フルリロード | 2003ミリ秒 | 1878ミリ秒 |
| フルリロード（キャッシュ） | 1682ミリ秒 | 1604ミリ秒 |
スレッドで CSS プリプロセッサを実行する
Vite はオプションでスレッドでの CSS プリプロセッサの実行をサポートするようになりました。を使用して有効にできますcss.preprocessorMaxWorkers: true。 Vuetify 2 プロジェクトの場合、この機能を有効にした後、開発の起動時間が 40% 短縮されました。
サーバーのコールド スタートを改善する新しいオプション
optimizeDeps.holdUntilCrawlEnd: false新しいタイプの依存関係最適化戦略への切り替えを設定でき、大規模なプロジェクトに役立つ可能性があります。将来的にはデフォルトでこのポリシーに切り替えることを検討しています。
高速解析のためのキャッシュチェック
fs.cachedChecks最適化がデフォルトで有効になるようになりました。 Windows では、tryFsResolve速度が約14100% 向上し、トライアングル ベンチマークでの ID 解析が5全体的に約 100% 向上しました。
内部パフォーマンスの最適化
開発サーバーのパフォーマンスがいくつかの段階的に改善されました。新しいタイプのミドルウェアは 304 でショートする可能性があります。ホットパスを避けますparseRequest。ロールアップが正しく遅延ロードされるようになりました。
廃止された機能
Vite を長期的に維持できるように、今後も Vite の API インターフェイスを最小限に抑えていきます。
非推奨のオプションimport.meta.glob_as
標準はimport Attributes(プロパティのインポート) に移動されましたが、現時点では新しいオプションに置き換える予定はありませんas。代わりに、 に切り替えることをお勧めしますquery。
実験的なビルド時の事前パッケージングを削除しました
ビルド時の事前パッケージ化は Vite 3 で追加された実験的な機能であり、現在は削除されています。 Rollup 4 がパーサーをネイティブに切り替え、Rolldown が開発中であるため、この機能のパフォーマンスと開発およびビルドの不一致は機能しなくなります。私たちは開発/ビルドの一貫性を引き続き向上させたいと考えており、「開発時の事前パッケージ化」と「運用ビルド」にはロールダウンを使用することがより良い選択であると結論付けました。ロールダウンでは、ビルド時にキャッシュを実装することもできます。これは、事前パッケージ化に依存するよりも効率的です。