こんにちは、スマートキャンプでBALES CLOUDを開発している中川です！
昨年の 9 月に Vue.js のメジャーバージョンが 3 になりかれこれ半年ほど経ちますが、みなさんのプロジェクトでは移行が進んでいますか？
私が普段開発している前述のプロダクトにも Vue.js の 2.x 系を採用しているのですが、利用している UI ライブラリが Vue3 に対応するのを待っている関係でまだ移行には至っておらず、
先んじて Lint のルールを Vue3 のものに切り替えて準備だけ進めているような状況です。
さて、Vue3 といえば Vue.js の発起人である Evan You 氏が始めた高速な開発用フロントエンドサーバーを実現する OSS である Vite が昨年話題になりました。
話題になったタイミングで私も記事を書いたのですが、その時点ではまだ Beta ですぐに本番投入できる段階ではなさそうだったので、そのままキャッチアップがおろそかになってしまっていました。
そんななか、先日 Vite のメジャーバージョンが上がり 2.0 となり、リリースをアナウンスする記事が Evan You 氏本人から出されました！
また、この 2.0 をもってめでたく Beta が外れました。
この記事では、Vite が今どのような状況にあるのか、どういった機能が追加されているのかなどを、アナウンス記事や周辺のエコシステムを参照しながら確認していこうと思います！
バージョン 2.0 の新機能
フレームワーク固有のサポートをプラグインに移譲
これは新機能というよりも再設計に近いかと思いますが、当初話題になった通り、Vite はあくまで Vue 用（それも Vue3）のツールとして存在していました。
しかし Vite2.0 では Vite と Vue の依存は切り離され、プラグインとして個別のフレームワークやライブラリのものを使用する方向に転換されました。
現在は Vue, React, Preact, Lit Element の公式テンプレートがあり、Svelte の対応も行われている最中のようです。
以下のリポジトリから各テンプレートの中身を確認することが出来ます。
Rollup プラグインの互換性
モジュールバンドラーである Rollup のプラグインの多くを Vite に対して利用することができます。
対応状況は以下のサイトから確認できますが、incompatibleとなっているものは少なく、主要なプラグインは揃っている印象です。
また、細かなカスタマイズを可能にするために、Vite 固有のフックやプロパティを追加することもできます。
使用する場面の例としては、開発サーバとビルド間の差異であったり、HMR(Hot Module Reloading)のカスタマイズなどがあげられていました。
依存関係の事前バンドルを 10~100 倍高速化
2.0 以前の Vite では依存関係の事前バンドルに Rollup を使用していました。
これを esbuild に変更することで高速化を実現したようです。
そもそも依存関係の事前バンドルがなぜ必要なのか？というところですが、これは Vite がネイティブの ESM を前提とした開発サーバであることから、
CommonJS から ESM への変換が必要というところと、あとは単純にバンドルすることでブラウザからのリクエスト数を減らす狙いがあります。
これは特に依存関係が重いプロジェクトにおいてインパクトが強いようです。
上記記事中では、たとえば React Material UI のような、と紹介されていましたので、Element UI や Vuetify など他の UI ライブラリでも同様に問題とされていたはずです。
CSS サポートの強化
主に URL や ESM、バンドル周りのサポートが強化されているようです。
- CSS ファイル中の
@importやurl()でのエイリアスや、npm(node_modules)の依存関係をサポート url()で指定したパスが、どこからインポートされたかに関わらず自動的にリベースされるように- コード分割された JS のチャンクが対応する CSS ファイルも出力し、リクエストされた時に JS のチャンクと並行して自動的にロードされるように
SSR(Server Side Rendering)のサポート
まだ experimental なものの、2.0 では SSR をサポートしています。
Vite は高速な開発サーバを実現するために、Node.js 環境で EMS ベースのソースコードを効率的に読み込んだり更新するための API を提供しています。
記事中の表現を借りると、ほぼサーバーサイドのHMRのようなものとなっているため、SSR との親和性も高かったのではないかと推測しました。
詳しい特徴や手順は以下のドキュメントに詳しいです。
オプトインのレガシーブラウザサポート
何度も書いてきましたが、そもそも Vite はネイティブな ESM サポートに対応しているモダンなブラウザーを対象としています。
ですが、@vitejs/plugin-legacyプラグインを使うことでレガシーブラウザに対応させることができるようになりました。
また、このプラグインを使用することで自動的にモダン版とレガシー版という異なる 2 つのバンドルを生成し、ブラウザの機能検出に基づいて適切な方のバンドルを配信することができます。
Vue 周辺のエコシステムの動きについて
ここまで Vite のバージョン 2.0 の新機能について見てきましたが、最後に Vite を取り巻く Vue 周辺のエコシステムについて箇条書きでまとめます。
プラグインとして React などを対応しているとはいえ、現段階では対応前の状況や製作者の出自を鑑みるに Vue コミュニティとの結びつきが強いように感じています。
- Vue2.x プラグイン
- GitHub - underfin/vite-plugin-vue2: Vue2 plugin for Vite
- Vite 本体の Vue プラグインは Vue3 用なので、Vue 2.x 系で Vite を利用するために必要なプラグインです
- Vue CLI の Vite プラグイン
- GitHub - IndexXuan/vue-cli-plugin-vite: Use Vite Today, with vue-cli
- ビルド時は Vue CLI 内蔵の Webpack を利用しつつ、開発サーバは Vite を利用したいのがモチベーションのようです
- Vue CLI で作られた既存のプロジェクトでコードベースの変更なしに利用できると謳われています
- examplesも作られているのである程度真だとは思いますが、依存関係が深いとき、たとえば Webpack の Loader を重ねているような環境でもうまくいくのかは気になります
- NuxtJS バージョン 3 での Vite サポート
- これは現状ではなく、NuxtJS バージョン 3 で対応予定なので将来の話ですが...
- https://twitter.com/debs_obrien/status/1355782424219811843
- ツイート主は Vue.js Amsterdam において Nuxt の講演も行っていたDebbie O'Brien氏
まとめ
ここまでざっと Vite2.0 の概観と Vue 周辺のエコシステムの動きについて見てきました！
個人的には、前述した担当プロダクトは Vue CLI で構築したものなので Vue CLI の Vite プラグインが気になっており、開発サーバを Vite に出来ると費用対効果が高そうなので一度試してみるつもりです。
過去記事でも触れましたが、Vite の爆速さは目をみはるものがあるのでまだ試したことの無い方はこの機会に試してみることをオススメします！
それでは！
