viteとESMについて

フロントエンド開発を行っているとたびたび目にする vite ですが、
なんとなく使っていて背景など把握していなかったので、これを機に簡潔にでもまとめたい。

vite とは

高速に動作するビルドツール。
Vue の創始者である Evan You が作成したこのツールは、従来のビルドツールが抱えていた問題を解決するために作られた。

従来のビルドツールの問題点

大規模なフロントエンドプロジェクトでは、JS ファイルの数が増加し、それをバンドルするプロセスが時間を要する。これにより、開発のサイクルが遅くなり、生産性が低下することが課題となっていた。

vite の特徴

Vite は、ESM をネイティブ(バンドルを行わず)に利用するため、
開発サーバーの起動が非常に早い

vite と ESM の関係

vite は Native ESM を利用。
これは開発でよく見る import, export などのモジュールの依存関係を解決するための仕組み。

ESM は最初からブラウザで使えたわけではなく、当初は一度バンドルする必要がありましたが、そのバンドルが時間がかかっていた。

ブラウザの進化に伴って ESM が標準化され、
バンドルなしでも使えるようになったので高速化のためにそうしている