Vite 2.0発表

2021年2月16日 - Vite 3.0発表もぜひご覧ください

本日、Vite 2.0の正式リリースを発表できることを大変嬉しく思います！

Vite（フランス語で「速い」、発音は/vit/）は、フロントエンドWeb開発のための新しい種類のビルドツールです。事前設定された開発サーバーとバンドラーの組み合わせですが、より軽量で高速です。ブラウザのネイティブESモジュールのサポートと、esbuildのようなコンパイル・トゥ・ネイティブ言語で書かれたツールを活用することで、軽快でモダンな開発体験を提供します。

Viteの速さを実感するには、Repl.itでViteとcreate-react-app（CRA）を使って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()パスは、エイリアスとnpm依存関係を尊重するようにViteのリゾルバーで強化されます。
• URLのリベース: url()パスは、ファイルがどこからインポートされたかに関わらず自動的にリベースされます。
• CSSコード分割: コード分割されたJSチャンクは、対応するCSSファイルも出力し、これは要求時にJSチャンクと並行して自動的にロードされます。

サーバーサイドレンダリング (SSR) サポート

Vite 2.0には実験的なSSRサポートが搭載されています。Viteは、開発中にNode.jsでESMベースのソースコードを効率的にロードおよび更新するためのAPI（ほぼサーバーサイドHMRのように）を提供し、CommonJS互換の依存関係を自動的に外部化して、開発およびSSRビルドの速度を向上させます。本番サーバーはViteから完全に分離でき、同じセットアップを簡単に適応させてプリレンダリング/SSGを実行できます。

Vite SSRは低レベルの機能として提供されており、より高レベルのフレームワークがそれを内部で活用することが期待されています。

レガシーブラウザのオプションサポート

ViteはデフォルトでネイティブESMをサポートするモダンなブラウザをターゲットにしていますが、公式の@vitejs/plugin-legacyを使用してレガシーブラウザのサポートをオプトインすることもできます。このプラグインは、モダン/レガシーのデュアルバンドルを自動的に生成し、ブラウザの機能検出に基づいて適切なバンドルを提供することで、サポートするモダンなブラウザでより効率的なコードを保証します。

ぜひお試しください！

たくさんの機能がありますが、Viteの始め方は簡単です！以下のコマンドから始めて（Node.js >=12であることを確認してください）、文字通り1分でViteを搭載したアプリを起動できます。

npm init @vitejs/app

次に、ガイドでViteがすぐに提供する機能を確認してください。また、GitHubでソースコードをチェックしたり、Twitterで最新情報をフォローしたり、Discordチャットサーバーで他のViteユーザーと議論に参加したりすることもできます。