Vite 2.0 の発表
2021年2月16日 - Vite 3.0 の発表をご覧ください。
本日、Vite 2.0 の正式リリースを発表できることを嬉しく思います！
Vite (フランス語で「速い」を意味し、発音は/vit/) は、フロントエンド Web 開発のための新しいタイプのビルドツールです。設定済みの開発サーバーとバンドラーの組み合わせと考えてください。しかし、より洗練され、高速です。ブラウザのネイティブ ES モジュールのサポートと、esbuildのようなコンパイルしてネイティブな言語で書かれたツールを活用し、キビキビとした最新の開発体験を提供します。
Vite がどれほど速いかを把握するには、Vite と create-react-app (CRA) を使用して Repl.it で React アプリケーションを起動するこのビデオ比較をご覧ください。
これまで Vite を聞いたことがなく、もっと詳しく知りたい場合は、プロジェクトの背後にある理論的根拠をご覧ください。Vite が他の類似ツールとどのように異なるかを知りたい場合は、比較をご覧ください。
2.0 の新機能
1.0 が RC から出る前に内部を完全にリファクタリングすることを決定したため、これは実際には Vite の最初の安定リリースです。そうは言っても、Vite 2.0 は以前のバージョンよりも多くの大きな改善をもたらします。
フレームワークに依存しないコア
Vite の最初のアイデアは、ネイティブ ESM を介して Vue シングルファイルコンポーネントを提供するハッキーなプロトタイプとして始まりました。Vite 1 は、その上に HMR を実装したそのアイデアの継続でした。
Vite 2.0 は、これまで学んだことを生かし、より堅牢な内部アーキテクチャでゼロから再設計されました。現在、完全にフレームワークに依存せず、すべてのフレームワーク固有のサポートはプラグインに委譲されています。現在、Vue、React、Preact、Lit Element の公式テンプレートがあり、Svelte 統合のためのコミュニティの取り組みが進行中です。
新しいプラグイン形式と API
WMRに触発された新しいプラグインシステムは、Rollup のプラグインインターフェースを拡張し、多くの Rollup プラグインと互換性があります。プラグインは、Rollup 互換のフックと、Vite のみの動作を調整するための追加の Vite 固有のフックとプロパティ（例：開発とビルドの区別、HMR のカスタム処理）を使用できます。
プログラム APIも大幅に改善され、Vite の上に構築されたより高レベルのツール/フレームワークを容易にしています。
esbuild を活用した依存関係のプリバンドル
Vite はネイティブ ESM 開発サーバーであるため、ブラウザのリクエスト数を減らし、CommonJS から ESM への変換を処理するために依存関係をプリバンドルします。以前は、Vite は Rollup を使用してこれを行っていましたが、2.0 では esbuild を使用するようになり、依存関係のプリバンドルが 10 ～ 100 倍高速になりました。参考までに、React Material UI のような重い依存関係を持つテストアプリのコールドブートは、以前は M1 搭載の MacBook Pro で 28 秒かかっていましたが、現在は約 1.5 秒かかります。従来のバンドラーベースのセットアップから切り替える場合も、同様の改善が期待できます。
ファーストクラスの CSS サポート
Vite は、CSS をモジュールグラフのファーストクラスの要素として扱い、次のものをすぐにサポートします。
- リゾルバーの強化：CSS の
@importおよびurl()パスは、Vite のリゾルバーで強化され、エイリアスと npm 依存関係を尊重します。 - URL のリベース：
url()パスは、ファイルのインポート元に関係なく自動的にリベースされます。 - CSS コード分割：コード分割された JS チャンクは、対応する CSS ファイルも出力し、要求されたときに JS チャンクと並行して自動的に読み込まれます。
サーバーサイドレンダリング (SSR) のサポート
Vite 2.0 には、実験的な SSR サポートが付属しています。Vite は、開発中に Node.js で ESM ベースのソースコードを効率的にロードおよび更新するための API (サーバーサイド HMR のように) を提供し、開発と SSR ビルドの速度を向上させるために、CommonJS 互換の依存関係を自動的に外部化します。本番サーバーは Vite から完全に分離でき、同じ設定を簡単に適用してプリレンダリング/SSG を実行できます。
Vite SSR は低レベルの機能として提供されており、より高レベルのフレームワークが内部で活用することを期待しています。
オプトインのレガシーブラウザサポート
Vite はデフォルトでネイティブ ESM サポートを備えた最新のブラウザをターゲットにしていますが、公式の @vitejs/plugin-legacy を介してレガシーブラウザをサポートすることもできます。このプラグインは、最新のバンドルとレガシーバンドルの両方を自動的に生成し、ブラウザの機能検出に基づいて適切なバンドルを提供し、それらをサポートする最新のブラウザでより効率的なコードを保証します。
試してみてください！
多くの機能がありましたが、Vite の使い始めは簡単です。次のコマンドから始めて、文字通り 1 分で Vite を搭載したアプリをスピンアップできます (Node.js >= 12 がインストールされていることを確認してください)。
npm init @vitejs/app次に、ガイドを参照して、Vite がすぐに提供するものをご覧ください。また、GitHub でソースコードを確認したり、Twitter で最新情報をフォローしたり、Discord チャットサーバーで他の Vite ユーザーと議論に参加したりすることもできます。