次世代のフロントエンドツールチェーンであるVite3.0がリリースされました

v2のリリースから16か月後、 Vite3.0が正式にリリースされました。この発表によると、Vite 2の採用は、昨年2月のリリース以来増加しており、週に100万npmを超えるダウンロードがあり、巨大なエコシステムが急速に形成されています。Viteは、Webフレームワークの革新の新しい波を推進しています。

「Node.jsのEOLと一致するように、少なくとも年に1回、Viteの新しいメジャーバージョンをリリースすることを決定しました。また、エコシステム内のプロジェクトに短い移行パスを提供するために、ViteのAPIを定期的に確認する機会を利用します。」

Vite3.0のアップデートには主に次のものが含まれます。

新しいドキュメント

新しいv3ドキュメントは、vitejs.devで入手できます。Viteは、他の機能の中でも特にダークモードで新しいVitePressデフォルトテーマを使用するようになりました。

エコシステム内のいくつかのプロジェクトがここに移行しました（Vitest、vite-plugin-pwa、およびVitePress自体を参照）。Vite 2のドキュメントにアクセスする必要がある場合、それらはv2.vitejs.devに残ります。Viteマスターブランチへのすべてのコミットが自動的にデプロイされる新しいmain.vitejs.devサブドメインもあります。これは、ベータリリースをテストするとき、またはコア開発に貢献するときに役立ちます。

公式のスペイン語翻訳を追加するだけでなく：

Viteスターターテンプレートを作成する

create-viteテンプレートは、お気に入りのフレームワークでViteをすばやくテストするための優れたツールです。Vite 3では、すべてのテンプレートに、新しいドキュメントに合わせた新しいテーマがあります。それらをオンラインで開き、今日からVite3の使用を開始します。

すべてのテンプレートがこのテーマを共有するようになりました。リンティング、テストセットアップ、その他の機能を含むより完全なソリューションについては、create-vueやcreate- svelteなどの一部のフレームワーク用の公式のViteベースのテンプレートがあります。Awesome Viteには、コミュニティが管理するテンプレートのリストがあります。

開発改善

クイックCLI

  VITEv3.0.0は 320ミリ秒で  準備完了

  ➜  ローカル：   http ：//127.0.0.1：5173 / 
  ➜  ネットワーク：-hostを使用して公開

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

改善されたWebSocket接続戦略

Vite 2の問題点の1つは、プロキシの背後で実行しているときにサーバーを構成することでした。Vite 3はデフォルトの接続スキームを変更するため、ほとんどの場合、すぐに使用できます。これらの設定はすべて、vite-setup-catalogueViteEcosystemCIの一部としてテストされています。

コールドスタートの改善

Viteは、最初に静的にインポートされたモジュールを取得するときにプラグインがインポートを挿入するコールドスタート中に完全なリロードを回避するようになりました（＃8869）。

import.meta.glob

import.meta.globサポートが書き直されました。Globインポートガイドの新機能をお読みください：

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

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' } })

熱心なインポートがフラグとして渡されるようになりました

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

WASMインポートを将来の標準に合わせる

WebAssembly Import APIが改訂され、Future Standardsとの競合を回避し、より柔軟になりました。

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

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

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

ビルドの改善

ESMSSRのデフォルトビルド

エコシステム内のほとんどのSSRフレームワークは、すでにESMを使用して構築されています。したがって、Vite3はESMをSSRビルドのデフォルト形式にします。これにより、以前のSSR外部化ヒューリスティックを単純化し、デフォルトで依存関係を外部化することが可能になります。

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

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

バンドルサイズを減らす

Viteはその依存関係のほとんどをバンドルし、可能な限り最新の軽量の代替手段を使用しようとします。Vite 3のリリースサイズはV2より30％小さくなっています。

バグ修正

過去3か月で、Viteの未解決の問題は770から400に減少しました。

互換性に関する注意事項

Viteは、EOLに達したNode.js12をサポートしなくなりました。Node.js14.18+が必要になりました。
ViteはESMとしてリリースされ、互換性のためにCJSプロキシがESMエントリに追加されました。
最新のブラウザベースラインは、ネイティブESモジュール、ネイティブESM動的インポート、およびネイティブESモジュール、ネイティブESM動的インポート、および機能をサポートするブラウザの機能をサポートするブラウザを対象としています。import.meta
SSRおよびライブラリモードのJSファイル拡張子は、有効な拡張子（js、mjs、またはcjs）を使用して、形式とパッケージタイプに基づいてJSエントリとチャンクを出力するようになりました。

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

詳細については、変更ログを参照してください。