UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Vite】Viteとは

State of JS 2021 のビルドツールで満足度が高かったViteをそういえば調べてなかったので調べた

f:id:uggds:20220304013509p:plain

The State of JS 2021

vitejs.dev

Vite とは

フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音するみたい

Vue.js を開発したEvan You氏が開発したビルドツール

特徴としては

  • 開発中はバンドルしないから開発サーバの起動が早い
  • 開発中はバンドルしないからHMR(ホットモジュールリプレースメント)による更新が早い
  • .ts ファイルをインポートすることをサポートしているが型チェックはしない
  • .jsxも標準サポート

など

webpackなどと比較してバンドルしないことで高速化を実現しているみたい

ただ、本番用にはバンドルするみたいで、その辺はドキュメントに書いてあった

また、webpackのような複雑な設定も不要になるので導入は簡単そうに思えた

あとは関連して、ViteでビルドするテストランナーVitestも注目されている

f:id:uggds:20220304013358p:plain

vitest.dev

Jestもファイルを監視してして、変更があればビルドするという使い方をする時にwebpackのようなビルドツールを使えるが、それによりそこでもバンドルすことの遅延が発生する

そこで、ViteベースのテストランナーVitestを使うとバンドルが不要なため高速

書き方はJestと変わらないが、Jestよりも環境構築が楽ということもあって人気があるらしい

webpack + jest のVueプロジェクトを作り直そうと考えていたので、新たな選択肢にいれてもよいかも

他参考

あたらしいテストフレームワークVitestをReactで試してみた | DevelopersIO