Vite 3.0 がリリースされました！

2022年7月23日 - Vite 4.0 の発表をご覧ください

昨年2月、Evan You氏がVite 2をリリースしました。それ以来、その採用は止まることなく拡大し、週100万件以上のnpmダウンロードに達しました。リリース後、急速に広大なエコシステムが形成されました。ViteはWebフレームワークにおける新たなイノベーション競争を推進しています。Nuxt 3はデフォルトでViteを使用しています。SvelteKit、Astro、Hydrogen、SolidStartはすべてViteで構築されています。LaravelはデフォルトでViteを使用することを決定しました。Vite RubyはViteがRailsのDXをどのように改善できるかを示しています。VitestはJestに代わるViteネイティブな代替として進歩を遂げています。Viteは、CypressとPlaywrightの新しいコンポーネントテスト機能の背後にあり、Storybookには公式ビルダーとしてのViteがあります。そして、リストは続きます。これらのプロジェクトのほとんどのメンテナーは、Viteコア自体を改善することに関与し、Vite チームやその他の貢献者と緊密に協力しました。

v2のリリースから16ヶ月後の今日、Vite 3のリリースを発表できることを嬉しく思います。Node.jsのEOLに合わせて、少なくとも毎年新しいViteメジャーをリリースし、エコシステムのプロジェクトの短い移行パスでViteのAPIを定期的に見直す機会を得ることを決定しました。

クイックリンク

• ドキュメント
• 移行ガイド
• 変更履歴

Viteを初めて使用する場合は、Viteの理由ガイドを読むことをお勧めします。次に、はじめにと機能ガイドを確認して、Viteがすぐに提供するものを確認してください。いつものように、GitHubでの貢献を歓迎します。これまで600人以上の共同作業者がViteの改善に協力してきました。Twitterで最新情報をフォローするか、Discordチャットサーバーで他のViteユーザーとディスカッションに参加してください。

新しいドキュメント

新しいv3ドキュメントを楽しむには、vite.devにアクセスしてください。Viteは、他の機能の中でも特に、素晴らしいダークモードを備えた新しいVitePressのデフォルトテーマを使用するようになりました。

エコシステムのいくつかのプロジェクトはすでにそれに移行しています（Vitest、vite-plugin-pwa、VitePress自体を参照してください）。

Vite 2ドキュメントにアクセスする必要がある場合は、v2.vite.devでオンラインのままになります。また、新しいmain.vite.devサブドメインもあり、Viteのメインブランチへの各コミットが自動的にデプロイされます。これは、ベータ版をテストしたり、コアの開発に貢献したりする場合に役立ちます。

また、以前の中国語と日本語の翻訳に加えて、公式のスペイン語の翻訳も追加されました

• 简体中文
• 日本語
• Español

Viteスターターテンプレートの作成

create-viteテンプレートは、お気に入りのフレームワークでViteをすばやくテストするための優れたツールでした。Vite 3では、すべてのテンプレートが新しいドキュメントに合わせて新しいテーマになりました。オンラインで開いて、今すぐVite 3で遊んでみましょう

テーマはすべてのテンプレートで共有されるようになりました。これにより、これらのスターターのスコープを、Viteを使い始めるための最小限のテンプレートとしてより適切に伝えることができるはずです。リンティング、テスト設定、その他の機能を含むより完全なソリューションについては、create-vueやcreate-svelteなど、一部のフレームワーク向けにViteを活用した公式テンプレートがあります。Awesome Viteにはコミュニティが管理するテンプレートのリストがあります。

開発の改善

Vite CLI

  VITE v3.0.0  ready in 320 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

CLIの美観の改善に加えて、デフォルトの開発サーバーポートが5173になり、プレビューサーバーが4173でリッスンしていることに気付くでしょう。この変更により、Viteは他のツールとの衝突を回避できます。

改善されたWebSocket接続戦略

Vite 2の苦痛の1つは、プロキシの背後で実行しているときにサーバーを構成することでした。Vite 3では、ほとんどのシナリオで箱から出してすぐに動作するように、デフォルトの接続スキームが変更されています。これらのすべてのセットアップは、vite-setup-catalogueを介してViteエコシステムCIの一部としてテストされるようになりました。

コールドスタートの改善

Viteは、初期の静的にインポートされたモジュールをクロール中にプラグインによってインポートが挿入された場合、コールドスタート中に完全なリロードを回避するようになりました（#8869）。

詳細はこちらをクリック

Vite 2.9では、スキャナーとオプティマイザーの両方がバックグラウンドで実行されていました。スキャナーがすべての依存関係を見つけることができる最良のシナリオでは、コールドスタートでリロードは必要ありませんでした。ただし、スキャナーが依存関係を見逃した場合、新しい最適化フェーズとリロードが必要でした。Viteは、新しい最適化されたチャンクがブラウザーが持っていたチャンクと互換性があるかどうかを検出したため、v2.9でこれらのリロードの一部を回避できました。ただし、共通の依存関係がある場合、サブチャンクが変更される可能性があり、重複した状態を回避するためにリロードが必要でした。Vite 3では、静的インポートのクロールが完了するまで、最適化された依存関係はブラウザーに渡されません。（たとえば、プラグインによって挿入された）不足している依存関係がある場合は、簡単な最適化フェーズが発行され、その後でのみ、バンドルされた依存関係が送信されます。そのため、これらの場合、ページのリロードは不要になりました。

import.meta.glob

import.meta.globのサポートが書き直されました。Glob Import Guideの新しい機能についてお読みください

複数のパターンを配列として渡すことができます

import.meta.glob(['./dir/*.js', './another/*.js'])

特定のファイルを無視するために、ネガティブパターンがサポートされるようになりました（!で始まる）

import.meta.glob(['./dir/*.js', '!**/bar.js'])

ツリーシェイキングを改善するために、名前付きインポートを指定できます

import.meta.glob('./dir/*.js', { import: 'setup' })

メタデータを添付するために、カスタムクエリを渡すことができます

import.meta.glob('./dir/*.js', { query: { custom: 'data' } })

Eager Importsはフラグとして渡されるようになりました

import.meta.glob('./dir/*.js', { eager: true })

将来の標準との整合性を図ったWASMインポート

将来の標準との衝突を回避し、より柔軟にするために、WebAssemblyインポートAPIが改訂されました

import init from './example.wasm?init'

init().then((instance) => {
  instance.exports.test()
})

WebAssemblyガイドで詳細をご覧ください

ビルドの改善

デフォルトのESM SSRビルド

エコシステムのほとんどのSSRフレームワークは、すでにESMビルドを使用していました。そのため、Vite 3では、SSRビルドのデフォルト形式としてESMが採用されています。これにより、デフォルトで依存関係を外部化する以前のSSR外部化ヒューリスティックを合理化できます。

改善された相対ベースのサポート

Vite 3は、相対ベース（base: ''を使用）を適切にサポートするようになり、ビルドされたアセットを再ビルドせずに異なるベースにデプロイできるようになりました。これは、IPFSなどのコンテンツアドレス可能なネットワークにデプロイする場合など、ビルド時にベースが不明な場合に役立ちます。

実験的機能

ビルド済みアセットパスの詳細な制御（実験的）

これだけでは不十分なデプロイシナリオが他にもあります。たとえば、生成されたハッシュ化されたアセットを公開ファイルとは異なるCDNにデプロイする必要がある場合、ビルド時のパス生成をより詳細に制御する必要があります。Vite 3は、ビルドされたファイルパスを変更するための実験的APIを提供します。詳細については、Build Advanced Base Optionsを確認してください。

ビルド時のEsbuild依存関係の最適化（実験的）

開発時とビルド時の主な違いの一つは、Viteが依存関係をどのように処理するかです。ビルド時には、@rollup/plugin-commonjs が使用され、CJSのみの依存関係（Reactなど）のインポートを可能にします。開発サーバーを使用する場合、代わりに esbuild が使用されて依存関係が事前にバンドルおよび最適化され、CJS依存関係をインポートするユーザーコードを変換する際にインラインの相互運用スキームが適用されます。Vite 3の開発中に、ビルド時にもesbuildを使用して依存関係を最適化することを可能にするために必要な変更を導入しました。@rollup/plugin-commonjs を回避することができ、開発時とビルド時が同じように動作するようになります。

Rollup v3が今後数ヶ月以内にリリースされ、次のViteメジャーバージョンが続くことを踏まえ、v3の範囲を縮小し、Viteとエコシステムがビルド時の新しいCJS相互運用アプローチに関する潜在的な問題を解決するための時間をより多く与えるために、このモードをオプションにすることにしました。フレームワークは、Vite 4の前に、独自のペースでデフォルトでビルド時にesbuildの依存関係最適化を使用するように切り替えることができます。

HMR 部分的な受け入れ（実験的）

HMR Partial Accept のオプトインサポートがあります。この機能は、同じモジュール内で複数のバインディングをエクスポートするフレームワークコンポーネントに対して、よりきめ細かいHMRを可能にする可能性があります。詳細については、この提案に関する議論をご覧ください。

バンドルサイズの削減

Viteは、公開およびインストール時のフットプリントを重視しています。新しいアプリの迅速なインストールは、重要な機能です。Viteはほとんどの依存関係をバンドルし、可能な限り最新の軽量な代替品を使用しようとします。この継続的な目標を継続し、Vite 3の公開サイズはv2よりも30％小さくなっています。

	公開サイズ	インストールサイズ
Vite 2.9.14	4.38MB	19.1MB
Vite 3.0.0	3.05MB	17.8MB
削減	-30%	-7%

部分的に、この削減は、ほとんどのユーザーが必要としていない一部の依存関係をオプションにしたことで実現しました。まず、Terser がデフォルトでインストールされなくなりました。Vite 2で既にJSとCSSの両方のデフォルトのミニファイアとしてesbuildを使用したため、この依存関係はもはや必要ありません。build.minify: 'terser'を使用する場合は、インストールする必要があります（npm add -D terser）。また、node-forge をモノレポから移動し、自動HTTPS証明書生成のサポートを新しいプラグインとして実装しました：@vitejs/plugin-basic-ssl。この機能はローカルストアに追加されない信頼できない証明書のみを作成するため、サイズを追加するだけの価値はありませんでした。

バグ修正

最近Viteチームに加わった@bluwyoo、@sapphi_redが主導してトリアージマラソンが実施されました。過去3ヶ月間で、Viteの未解決の問題は770から400に減少しました。そして、この減少は、新たにオープンされたPRが過去最高を記録している間に達成されました。同時に、@haoqunjiangも包括的なViteの問題の概要をキュレーションしました。

互換性に関する注意

• Viteは、EOLに達したNode.js 12/13/15をサポートしなくなりました。Node.js 14.18以上/16以上が必要になりました。
• Viteは、互換性のためにESMエントリへのCJSプロキシを使用して、ESMとして公開されるようになりました。
• モダンブラウザベースラインは、ネイティブESモジュール、ネイティブESM動的インポート、およびimport.meta機能をサポートするブラウザをターゲットにするようになりました。
• SSRおよびライブラリモードでのJSファイル拡張子は、形式とパッケージタイプに基づいて、出力JSエントリとチャンクに有効な拡張子（js、mjs、またはcjs）を使用するようになりました。

詳細については、移行ガイドをご覧ください。

Vite Coreのアップグレード

Vite 3に向けて作業する中で、Vite Coreへのコントリビューターの貢献エクスペリエンスも改善しました。

• ユニットテストとE2EテストはVitestに移行され、より高速で安定したDXが提供されます。この移行は、エコシステムにおける重要なインフラストラクチャプロジェクトのドッグフーディングとしても機能します。
• VitePressのビルドは、CIの一部としてテストされるようになりました。
• Viteは、エコシステムの他の部分に従い、pnpm 7にアップグレードしました。
• プレイグラウンドは、パッケージディレクトリから/playgroundsに移動しました。
• パッケージとプレイグラウンドは"type": "module"になりました。
• プラグインはunbuildを使用してバンドルされるようになり、plugin-vue-jsxとplugin-legacyがTypeScriptに移行されました。

エコシステムはv3に対応しています

Viteを搭載したフレームワークがVite 3に対応できるように、エコシステムのプロジェクトと緊密に連携してきました。vite-ecosystem-ciを使用すると、エコシステムの主要なプレーヤーのCIをViteのメインブランチに対して実行し、リグレッションを導入する前にタイムリーなレポートを受け取ることができます。今日のリリースは、Viteを使用するほとんどのプロジェクトとすぐに互換性があるはずです。

謝辞

Vite 3は、ViteチームのメンバーがエコシステムプロジェクトのメンテナーおよびViteコアへの他のコラボレーターと協力して達成した努力の集大成です。

機能や修正を実装し、フィードバックを提供し、Vite 3に関わってくださったすべての方々に感謝します。

• Viteチームメンバーの@youyuxi、@patak_dev、@antfu7、@bluwyoo、@sapphi_red、@haoqunjiang、@poyoho、@Shini_92、そして@retropragma。
• @benmccann、@danielcroe、@brillout、@sheremet_va、@userquin、@enzoinnocenzi、@maximomussini、@IanVanSchooten、Astroチーム、そしてv3の形成に貢献したエコシステム内のすべての他のフレームワークおよびプラグインのメンテナー。
• @dominikgのvite-ecosystem-ciに関する取り組みに感謝します。
• @ZoltanKochanのpnpmに関する取り組みと、それに関するサポートが必要な場合に迅速に対応してくれたことに感謝します。
• @rixoのHMR Partial Acceptのサポートに感謝します。
• @KiaKing85のVite 3リリースに向けてテーマを準備してくれたこと、そして@_brc_ddのVitePress内部構造に関する取り組みに感謝します。
• @CodingWithCegoの新しいスペイン語翻訳、そして@ShenQingchuan、@hiro-lapis、そして中国語および日本語翻訳チームの他のメンバーが翻訳されたドキュメントを最新の状態に保ってくれていることに感謝します。

また、Viteチームをスポンサーしてくださる個人や企業、Vite開発に投資している企業にも感謝します。Viteとエコシステムに関する@antfu7の取り組みの一部は、Nuxt Labsでの彼の仕事の一部であり、StackBlitzは、@patak_devをViteでのフルタイムの仕事のために雇用しました。

今後について

今後数ヶ月間は、Viteの上に構築されたすべてのプロジェクトのスムーズな移行を確保するために取り組んでいきます。したがって、最初のマイナーバージョンは、新しくオープンされた問題に焦点を当てて、トリアージの取り組みを継続することに重点を置きます。

Rollupチームは、次のメジャーバージョンに取り組んでおり、今後数ヶ月以内にリリースされる予定です。Rollupプラグインのエコシステムが更新される時間を確保した後、新しいViteメジャーバージョンが続きます。これにより、今年中にさらに大きな変更を導入する機会が得られ、このリリースで導入された一部の実験的な機能を安定させることができます。

Viteの改善にご協力いただける場合は、問題のトリアージを支援することが最善の方法です。私たちのDiscordに参加して、#contributingチャンネルを探してください。または、私たちの#docsに参加したり、他の人を#helpしたり、プラグインを作成したりしてください。私たちはまだ始まったばかりです。ViteのDXを改善し続けるためのオープンなアイデアがたくさんあります。