2022/7/13に、フロントエンドツールである Vite のバージョン 3.0 がリリースされました 🎉
<ul>
<li><a href="https://vitejs.dev/blog/announcing-vite3.html">Vite 3.0 is out! | Vite</a></li>
<li><a href="https://github.com/vitejs/vite/blob/v3.0.0/packages/vite/CHANGELOG.md">CHANGELOG</a></li>
<li><a href="https://vitejs.dev/guide/migration.html">Migration from v2 | Vite</a></li>
</ul>
このエントリーでは、リリース時に公開されたアナウンス(<a href="https://github.com/vitejs/vite/releases/tag/v3.0.0">Release v3.0.0 · vitejs/vite</a>)の内容をベースに、変更点を改めて１つずつ掘り下げて確認してみます。
<h3>New Documentation</h3>
公式ドキュメント(<a href="https://ja.vitejs.dev/">vitejs.dev</a>)が <a href="https://vitepress.vuejs.org/">VitePress</a> のデフォルトテーマを利用した形で刷新されました。ダークテーマ表示などが可能になっています。
また、あわせて次のサブドメインでもドキュメントを閲覧できるようになっています。
<ul>
<li><a href="https://v2.vitejs.dev/">v2.vitejs.dev</a> - Vite 2.x 系のドキュメント</li>
<li><a href="https://main.vitejs.dev/">main.vitejs.dev</a> - Vite のメインブランチの内容</li>
</ul>
<h3>Create Vite Starter Templates</h3>
Vite プロジェクトの Scaffold ジェネレータである <a href="https://github.com/vitejs/vite/tree/main/packages/create-vite"><code>create-vite</code></a> について、Vite 3.x が利用されるようになりました。
<h3>Dev Improvements</h3>
<h4>Vite CLI</h4>
デフォルトの開発サーバーポートが <code>5173</code>、プレビューサーバーのポートが <code>4173</code> に変更されました。デフォルトポートは以前は <code>3000</code> と <code>5000</code> でしたが、MacOS でポートの衝突が発生するなどの<a href="https://github.com/vitejs/vite/issues/5707">問題があった</a>ようです。
ちなみになぜ <code>5173</code> という中途半端な数字なのだろう？と思い調べてみましたが、以下の Issue コメントを見つけました。
<a href="https://github.com/vitejs/vite/pull/6330#issuecomment-1003405068">https://github.com/vitejs/vite/pull/6330#issuecomment-1003405068</a>
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">At a team meeting we thought about 5173
Like 5173 in leet for Vite | V I T Ǝ | V === Roman 5</code></pre></div>
<ul>
<li>V … 5</li>
<li>I … 1</li>
<li>T … 7</li>
<li>Ǝ … 3</li>
</ul>
らしいです。cool
<h4>Improved WebSocket Connection Strategy</h4>
Vite 2.x までは、Proxy を経由したサーバー確立に課題があったとのことで、3.0 からはそれが改善されました。
<a href="https://github.com/sapphi-red/vite-setup-catalogue"><code>vite-setup-catalogue</code></a> というセットアップのサンプルリポジトリ内にも追加されたことで、今後は同パターンは CI で検証されるようになったとのことです。
<h4>Cold Start Improvements</h4>
コールドスタート時に依存関係を後から解決する際に、依存の状態によってはフルリロードが発生する可能性があったのが、ブラウザに依存を渡すタイミングを調整することで効率化され、回避可能になったようです。
詳細: <a href="https://github.com/vitejs/vite/pull/8869#issuecomment-1172902125">https://github.com/vitejs/vite/pull/8869#issuecomment-1172902125</a>
<h4>import.meta.glob</h4>
Vite では以前から <a href="https://vitejs.dev/guide/features.html#glob-import"><code>Glob Import</code></a> と呼ばれる機能が存在し、特別な関数 <code>import.meta.glob</code> を介して glob 形式で記述してのモジュール一括インポートが可能です。
Vite 3.0 では機能が強化され、より柔軟な指定が可能になりました。
<ul>
<li>Multiple Patterns : 複数の glob パターンの記述</li>
<li>Negative Patterns : 除外パターンの記述</li>
<li>Named Imports : モジュールの一部のみを指定可能</li>
<li>Custom Queries : クエリの付与</li>
<li>Eager Imports : Dynamic import の回避</li>
</ul>
<h4>Aligning WASM Import with Future Standards</h4>
Vite 2.x から WebAssembly を
<div class="remark-highlight"><pre class="language-js"><code class="language-js">import init from './example.wasm'
</code></pre></div>
の形で import できましたが、将来的に ESM の仕様として WebAssembly が統合された場合のバッティングを考慮し、
<div class="remark-highlight"><pre class="language-js"><code class="language-js">import init from './example.wasm?init'
</code></pre></div>
と、<code>?init</code> オプションが付与された場合に Vite 2.x 以前と同様の挙動になるよう変更されました。
現状で <code>?init</code> オプションを付与せずに ESM として処理する場合には <a href="https://github.com/Menci/vite-plugin-wasm"><code>vite-plugin-wasm</code></a>のようなプラグインの利用が必須となります。
<h3>Build Improvements</h3>
<h4>ESM SSR Build by Default</h4>
SSR 用フレームワークの大半が ESM ビルドを利用するようになったため、
Vite3 では SSR ビルドのデフォルト形式が ESM に変更されました。
Vite では、モジュールの形式(CommonJS/ESM)などに応じて、適宜 Vite の変換から切り離す（外部化する）ことで SSR 時の処理を効率化しています。
参考: <a href="https://v2.vitejs.dev/guide/ssr.html#ssr-externals">https://v2.vitejs.dev/guide/ssr.html#ssr-externals</a>
ESM がデフォルトになったことで、デフォルトで外部化される依存が増え、より効率的に SSR ビルドが可能になるようです。
なお、ESM になると困るケースのために <code>legacy.buildSsrCjsExternalHeuristics: true</code> というオプションも用意されているようです。
<h4>Improved Relative Base Support</h4>
<code>base</code> に <code>''</code> を指定することで、相対的なベースパスの指定ができるようになりました。
ビルドの段階でベースパスが不明なケースなどで役に立つようです。
<h3>Experimental Features</h3>
<h4>Built Asset Paths fine-grained Control (Experimental)</h4>
<code>experimental.renderBuiltUrl</code> オプションが Experimental 機能として導入されました。
CDN での配布などを前提とした場合、ビルドによって生成されたアセットのうち一部のみ URL が異なるケースが考えられます。
<code>experimental.renderBuiltUrl</code> を指定することで、ファイル名・ファイルタイプなどを利用して URL を切り分けられるようになります。
※公式ドキュメントよりコードを抜粋
<a href="https://vitejs.dev/guide/build.html#advanced-base-options">https://vitejs.dev/guide/build.html#advanced-base-options</a>
<div class="remark-highlight"><pre class="language-ts"><code class="language-ts">experimental: {
 renderBuiltUrl(filename: string, { hostType: 'js' | 'css' | 'html', type: 'public' | 'asset' }) {
 if (type === 'public') {
 return 'https://www.domain.com/' + filename
 }
 else if (path.extname(importer) === '.js') {
 return { runtime: `window.__assetsPath(${JSON.stringify(filename)})` }
 }
 else {
 return 'https://cdn.domain.com/assets/' + filename
 }
 }
}
</code></pre></div>
<h4>Esbuild Deps Optimization at Build Time (Experimental)</h4>
<code>optimizeDeps.disabled: false</code> 指定が Experimental 機能として可能になりました。
<a href="https://vitejs.dev/guide/migration.html#experimental">https://vitejs.dev/guide/migration.html#experimental</a>
Vite はデフォルトでは開発時には esbuild を用い、ビルド時には Rollup を利用します。
開発時とビルド時で異なるツールを利用するため、Vite を利用する際に考慮すべき大きい要素の一つとして挙げられます。
参考: <a href="https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild">Why Not Bundle with esbuild?</a>
<code>optimizeDeps.disabled: false</code> を用いると、ビルド時にも esbuild を利用するようになります。
CJS のみの依存関係も ESM に変換されるため、<code>@rollup/plugin-commonjs</code> プラグインが不要となります。
<h4>HMR Partial Accept (Experimental)</h4>
<code>experimental.hmrPartialAccept</code> オプションが Experimental 機能として導入されました。
Vite ではフレームワークやツールの作成者向けに HMR 用の API を公開しています。
<a href="https://vitejs.dev/guide/api-hmr.html">https://vitejs.dev/guide/api-hmr.html</a>
現状の HMR API の仕組みでは、HMR 可能なモジュールとそうでないモジュールが混在していたファイルの場合、
モジュールを部分的に差し替えることができず、非効率な更新が発生する可能性があります。
参考: <a href="https://github.com/vitejs/vite/discussions/7309">HMR partial accept · Discussion #7309 · vitejs/vite</a>
新しい API である <code>import.meta.hot.acceptExports</code> と組み合わせることで、
export されているモジュールについてより詳細かつ効率的に HMR の制御が可能になります。
<h3>Bundle Size Reduction</h3>
Vite 自体のサイズが小さくなりました。30%ほど軽量化されたそうです。
Minify 用の Terser がオプションになったことや、 <code>node-forge</code> が <code>vitejs/plugin-basic-ssl</code> というプラグインに置き換わったことに起因しているようです。
<h3>Compatibility Notes</h3>
<ul>
<li>Node.js のサポートバージョンが 14.18+ / 16+ になりました</li>
<li>Vite 自体が ESM として公開されています。CJS経由で利用する場合は CJS Proxy 経由となります
<ul>
<li>参考: teppeis/<a href="https://zenn.dev/teppeis/articles/2022-07-npm-dual-pacakge-cjs-proxy">Vite 3 が採用した CJS Proxy による Dual Package 構成</a></li>
</ul>
</li>
<li>サポートブラウザの基準が <code>"Native ESM"</code> <code>"Native ESM dynamic import"</code> <code>"import.meta"</code> の機能をサポートしているブラウザになりました</li>
<li>SSR および ライブラリモードにおいて、JS の拡張子はフォーマットやパッケージタイプに応じて適切な拡張子が選択されるようになりました</li>
</ul>
ブラウザバージョンが変わった点は注意が必要になるかもしれません。
Migration Guide によると、主要ブラウザでは次のバージョンがサポート対象になるようです。
<ul>
<li>Chrome >=87</li>
<li>Firefox >=78</li>
<li>Safari >=13</li>
<li>Edge >=88</li>
</ul>
<hr>
というわけで簡単な Vite 3.0 の内容のおさらいでした。
Vite はもともと Native ESM を前提とした仕組みをフル活用していることもあってか、
今回の変更点でも ESM を考慮した変更が多く入った印象を受けます。
個人的には、まだ Experimental ではありますが <code>Esbuild Deps Optimization at Build Time</code> にある、
ビルド時にも esbuild を利用可能になる未来が楽しみです。