2022/08/05 に公開 222 views

このエピソードについて

@spring-rainingが、ここ1年で積極的にViteを使っている@kazushikonosuと@T28_tatsuyaに、Viteの良さや最近リリースされたVite 3に期待することを聞いてみました。

過去にViteを取り上げた例

最近のViteの普及状況

  • @kazushikonosuの導入事例
    • LINEバイトでの事例
  • @T28_tatsuyaの導入事例
    • OA Couponでの事例
  • @spring-rainingの導入事例
    • Shared Component (OA CMS内で用いる汎用のコンポーネントライブラリ) で使用

Vite 3の新機能や変更点

  • https://vitejs.dev/blog/announcing-vite3.html
  • https://github.com/vitejs/vite/discussions/7611
  • 新しい日本語ドキュメント
  • 全く新しい機能が追加されているかというと、実はそうでもない
    • デフォルトの開発サーバーのポートが5173に、プレビューサーバーのポートが4173に変更
    • モジュールをglobで動的にimportできる import.meta.glob の機能の強化
    • デフォルトでSSRビルド時の出力がESMになり、より多くのモジュールを「外部化 (externalization)」できる
    • 生成ファイルを参照するbaseに相対パスを指定可能に
    • ビルド時にアセットのファイル名やファイルタイプに応じてbaseを出し分けられるように (experimental.renderBuiltUrl)
    • 開発時だけでなくビルド時もesbuildが使用可能に (optimizeDeps.disabled: false)
    • HMRでacceptする際の粒度が細かくなり、exportした名前単位で部分的に差し替えられる (experimental.hmrPartialAccept)

Refs