Vitejs について #

2021-05-01

Vitejs はいいぞって話です。実際にこのサイトも Vitejs を使用しています。

Vitejs ってなに #

Vitejs は Vuejs の作者の Evan You 氏 が開発しているノーバンドルなビルドツールです。
よく使いますが、開発者体験が非常に良いです。
開発時にはバンドル不要でサーバが立ち上がるため、起動や更新が非常に高速です。また、HMR がモジュールの総数と切り離されているため、規模に関わらず高速に動作します。スターターがあったり最近だとプラグインが充実してきて、正式リリースもされたのでプロダクション環境で使用している人も Twitter で数人観測しています。

また、Evan You 氏がメインとして作成していますが vue-cli の代用や for Vue のような位置付けではなく preact, React, svelte, lit-element などのスターターが用意されていることからもっと広い目で見てるバンドルツールということが窺えます。

ノーバンドルツールってなに #

最近のフロントエンドのツールはここら辺にフォーカスしてきている気がしています。Vitejs や Snowpack が最たる例であり、非常に高速で動作するため開発者体験が良いとされています。
最近のブラウザは Native ESM を実行できるようになっているため開発環境では localhost にアクセスすることで高速に直接モジュールを import して外部ライブラリだけ事前にコンパイルしておくという手法が最近の流行りな気がしています。逆にプロダクション環境ではこれまで通りのビルドをするといった感じです。
これがノーバンドルツールです。

ここら辺については作者の Evan You 氏が アルキメデスみたいなこと言ってます（？）。おもしれ〜。

Vitejs の特徴 #

とても速いです。

使ってみて #

明らかに開発者体験が良いです。大きなプロジェクトで使ったことがないのでなんとも言えないのですが、少なくとも webpack よりは良いと思います。先日、初めて Next.js の create-next-app を使用したのですがサーバの起動や差分検知による HMR の動作が非常に遅く感じました。また、現在仕事で webpack を使うこともあるのですがそこに比べて圧倒的にビルドのスピードが違うように感じます。（もちろん規模の違うプロジェクトで比較するのはナンセンスですが）

webpack は確かバンドルする過程でメモリ上にファイルを置いていたりして開発環境を圧迫してしまうみたいな点があるのですが、そこも Native ESM の直接的な import によって解決されていてとても良いと感じました。
また、最近だと Rollup のプラグインそのまま使えたり、vite 用のプラグインが充実してきたりしているため新しいツールとはいえ意外と痒いところに手が届いたりするのかなと思います。config では esbuild の書き方を採用したりもできるのでとても使い勝手が良い、最近のバンドルツールという印象を受けました。

ただ、まだ完璧とは言えず、上でプロダクション環境で使用している人をちらほら観測してると言いましたが、おそらく部分的な導入になっているのかなと思います。