Vite 5.1 がリリースされました！
2024年2月8日
昨年11月にリリースされた Vite 5 （発表記事） は、Vite とそのエコシステムにとって大きな飛躍となりました。数週間前には、npm の週間ダウンロード数が 1,000 万件、Vite リポジトリへの貢献者が 900 人に達したことを祝いました。本日、Vite 5.1 のリリースを発表できることを嬉しく思います。
他言語のドキュメント: 簡体字中国語, 日本語, スペイン語, ポルトガル語, 韓国語, ドイツ語
StackBlitz で Vite 5.1 をオンラインで試す: vanilla, vue, react, preact, lit, svelte, solid, qwik.
Vite を初めて使用する場合は、まず はじめに と 機能 のガイドを読むことをお勧めします。
最新情報を入手するには、X または Mastodon でフォローしてください。
Vite ランタイム API
Vite 5.1 では、新しい Vite ランタイム API の実験的サポートが追加されました。 これにより、Vite プラグインで処理することで任意のコードを実行できます。 ランタイムの実装がサーバーから分離されているため、`server.ssrLoadModule` とは異なります。 これにより、ライブラリとフレームワークの作成者は、サーバーとランタイム間の独自の通信レイヤーを実装できます。 この新しい API は、安定したら Vite の現在の SSR プリミティブを置き換えることを目的としています。
新しい API には多くの利点があります
- SSR 中の HMR のサポート。
- サーバーから分離されているため、単一のサーバーを使用できるクライアントの数に制限はありません。すべてのクライアントに独自のモジュールキャッシュがあります（メッセージチャネル/フェッチコール/直接関数コール/websocket を使用して、必要な方法で通信することもできます）。
- node/bun/deno 組み込み API に依存しないため、あらゆる環境で実行できます。
- 独自のコード実行メカニズムを持つツールと簡単に統合できます（たとえば、`new AsyncFunction` の代わりに `eval` を使用するランナーを提供できます）。
最初のアイデアは Pooya Parsa 氏によって提案 され、Anthony Fu 氏 によって vite-node パッケージとして実装され、Nuxt 3 Dev SSR を強化 し、後に Vitest の基盤としても使用されました。 したがって、vite-node の一般的なアイデアは、かなり長い間実戦テストされてきました。これは、Vitest で vite-node を再実装した Vladimir Sheremet 氏 による API の新しい反復であり、Vite Core に追加する際に API をさらに強力で柔軟にするために学習を取り入れました。PR は 1 年かけて作成されました。エコシステムメンテナーとの進化と議論は こちら をご覧ください。
情報
Vite ランタイム API は、環境 API の一部として Vite 6 でリリースされたモジュールランナー API に進化しました。
機能
`.css?url` のサポートの改善
CSS ファイルを URL としてインポートする機能が、確実かつ正しく機能するようになりました。これは、Remix が Vite に移行する際の最後の残されたハードルでした。 (#15259 を参照)。
`build.assetsInlineLimit` がコールバックをサポートするようになりました
ユーザーは、コールバックを提供 して、特定のアセットのインライン化をオプトインまたはオプトアウトできるようになりました。 `undefined` が返された場合、デフォルトのロジックが適用されます。 (#15366 を参照)。
循環インポートの HMR の改善
Vite 5.0 では、循環インポート内の受け入れられたモジュールは、クライアント側で問題なく処理できる場合でも、常にページ 전체の再読み込みをトリガーしていました。 これは緩和され、ページ 전체を再読み込みせずに HMR を適用できるようになりましたが、HMR 中にエラーが発生した場合、ページが再読み込みされます。 (#15118 を参照)。
すべての SSR パッケージを外部化するための `ssr.external: true` のサポート
Vite は、リンクされたパッケージを除くすべてのパッケージを外部化していました。 この新しいオプションを使用すると、リンクされたパッケージも含め、すべてのパッケージを強制的に外部化できます。 これは、すべてのパッケージが外部化されている通常のケースをエミュレートしたいモノレポ内のテストや、HMR を気にしないため常にパッケージを外部化したい `ssrLoadModule` を使用して任意のファイルを読み込む場合に便利です。 (#10939 を参照)。
プレビューサーバーで `close` メソッドを公開
プレビューサーバーは、開いているすべてのソケット接続を含むサーバーを適切にティアダウンする `close` メソッドを公開するようになりました。 (#15630 を参照)。
パフォーマンスの向上
Vite はリリースごとに高速化を続けており、Vite 5.1 にはパフォーマンスの向上が満載されています。 vite-dev-server-perf を使用して、Vite 4.0 からのすべてのマイナーバージョンの 10K モジュール (25 レベルの深さのツリー) の読み込み時間を測定しました。 これは、Vite のバンドルレスアプローチの効果を測定するための適切なベンチマークです。 各モジュールは、カウンターとツリー内の他のファイルへのインポートを含む小さな TypeScript ファイルであるため、これは主に個別のモジュールをリクエストするのにかかる時間を測定しています。 Vite 4.0 では、M1 MAX で 10K モジュールを読み込むのに 8 秒かかりました。 パフォーマンスに焦点を当てた Vite 4.3 でブレークスルーがあり、6.35 秒で読み込むことができました。 Vite 5.1 では、さらなるパフォーマンスの飛躍を遂げることができました。 Vite は現在、10K モジュールを 5.35 秒で提供しています。
このベンチマークの結果は Headless Puppeteer で実行され、バージョンを比較するのに適しています。 ただし、ユーザーが体験する時間とは一致しません。 Chrome のシークレットウィンドウで同じ 10K モジュールを実行すると、次のようになります。
| 10K モジュール | Vite 5.0 | Vite 5.1 |
|---|---|---|
| 読み込み時間 | 2892ms | 2765ms |
| 読み込み時間 (キャッシュ済み) | 2778ms | 2477ms |
| 全体再読み込み | 2003ms | 1878ms |
| 全体再読み込み (キャッシュ済み) | 1682ms | 1604ms |
CSS プリプロセッサをスレッドで実行
Vite は、CSS プリプロセッサをスレッドで実行するためのオプトインサポートを提供するようになりました。 `css.preprocessorMaxWorkers: true` を使用して有効にできます。 Vuetify 2 プロジェクトの場合、この機能を有効にすると開発の起動時間が 40% 短縮されました。 PR に他の設定のパフォーマンス比較があります。 (#13584 を参照)。 フィードバックをお願いします。
サーバーのコールドスタートを改善するための新しいオプション
`optimizeDeps.holdUntilCrawlEnd: false` を設定して、大規模プロジェクトで役立つ可能性のある依存関係最適化の新しい戦略に切り替えることができます。 将来的には、この戦略をデフォルトで切り替えることを検討しています。 フィードバックをお願いします。 (#15244)
キャッシュされたチェックによる高速化された解決
fs.cachedChecks の最適化がデフォルトで有効になりました。Windows では、tryFsResolve の速度が約 14 倍になり、triangle ベンチマークでは ID の解決速度が全体で約 5 倍向上しました。(#15704)
内部パフォーマンスの改善
開発サーバーには、いくつかの段階的なパフォーマンスの向上がありました。304 でショートサーキットするための新しいミドルウェア (#15586)。ホットパスでは parseRequest を回避しました (#15617)。Rollup は適切に遅延ロードされるようになりました (#15621)
非推奨
プロジェクトの長期的な保守性を確保するために、Vite の API サーフェスを可能な限り削減し続けています。
import.meta.glob の as オプションが非推奨になりました
標準は Import Attributes に移行しましたが、現時点では as を新しいオプションに置き換える予定はありません。代わりに、ユーザーは query に切り替えることをお勧めします。詳細は (#14420) を参照してください。
実験的なビルド時プリバンドリングが削除されました
Vite 3 で追加された実験的な機能であるビルド時プリバンドリングが削除されました。Rollup 4 がパーサーをネイティブに切り替え、Rolldown が開発中であるため、この機能のパフォーマンスと開発とビルドの不一致に関する問題はもはや有効ではありません。私たちは開発とビルドの一貫性を向上させ続けたいと考えており、「開発中のプリバンドリング」と「本番ビルド」の両方で Rolldown を使用することが、今後より良い選択であると結論付けました。Rolldown は、ビルド時に依存関係のプリバンドリングよりもはるかに効率的な方法でキャッシングを実装する可能性もあります。詳細は (#15184) を参照してください。
参加する
私たちは、Vite Core の 900 人の貢献者、そしてエコシステムを前進させ続けるプラグイン、統合、ツール、翻訳のメンテナーに感謝しています。Vite を楽しんでいただけているなら、ぜひご参加いただき、私たちを支援してください。貢献ガイド を確認し、issue のトリアージ、PR のレビュー、GitHub ディスカッション での質問への回答、Vite Land でのコミュニティの他のメンバーへの支援にご参加ください。
謝辞
Vite 5.1 は、コントリビューターのコミュニティ、エコシステムのメンテナー、そして Vite チーム のおかげで実現しました。Vite の開発を支援してくださっている個人および企業の皆様に感謝申し上げます。StackBlitz、Nuxt Labs、そして Astro は Vite チームメンバーを雇用しています。また、Vite の GitHub スポンサー、Vite の Open Collective、そして Evan You の GitHub スポンサー の皆様にも感謝申し上げます。