フロントエンドを書くこともあるのですが、わりと雰囲気で書くことが多く、、、正直あまりついていけていないため、改めてちゃんと勉強することにしました。
手始めに、最近よく名前を聞く Vite について何がすごいのか調べてみます。
2020年に Vue.js の開発者である Evan You 氏によって開発された、フロントエンドビルドツール。
開発体験を重要視しており、開発環境のビルドパフォーマンスが非常に良い。
Web アプリケーションを構築するための最も一般的なパターンをすぐにサポートすることを目指しており、Vite をコアとしてプラグインで様々な拡張ができる。
Vite 単体でフロントエンドアプリケーションを構築することもできるが、バックエンドフレームワークと組み合わせたり様々なフロントエンドフレームワークに組み込むことも可能。
- 公式サイト
- 概観についてわかりやすかった記事
- 開発体験にこだわっており、開発時のビルドパフォーマンスが非常に良い
- 従来の webpack などを使った開発では、開発環境でもバンドルをするため、変更を加えるたびに開発者の待ち時間が発生する
- Hot Module Replacement（HMR）によって、変更のあったモジュールのみ再バンドルすることで一定解消はされるが、それでもソースコードが大きくなるにつれて待ち時間は伸びていく
- Vite では、以下の仕組みによって、開発環境のビルド時間を最小限にしている
- 依存パッケージについては、高速な bundler である esbuild を利用し事前バンドル
- アプリケーションコードについては、ブラウザの ESM サポートを活用し、そもそもバンドルしない
- 高速なビルドツール
- Goで書かれていて、複数のCPUコア・メモリを効率的に使えるようになっている
- 全てのコードが、パフォーマンスを最優先として書かれている
- ただし、バージョン 1.0.0 にはまだ達しておらず、ベータ後期くらいのステージ
- Vite も プロダクションビルドでは Rollup を使っている
- 公式サイト
- わかりやすかった記事
- ブラウザの ESM サポートが進み、バンドルをして1つのJSファイルにまとめなくても、ES Modules をそのままブラウザで実行できるようになった（Native ESM）
- Vite ではその仕組みを利用し、開発環境ではそもそもバンドルをしないことで、高速なビルドパフォーマンスを実現（VITE はコンポーネントなどのトランスパイルをするだけで良くなった）
- また、これはソースコードの更新があったときの Hot Module Replacement（HMR ）のパフォーマンスにも寄与する
- Native ESM について参考になった記事
- もちろん、開発環境でなくともブラウザの Native ESM は使えるが、本番環境で使うにはパフォーマンス上の問題が出てくる
- インポートの増加によって、ネットワークのラウンドトリップの増加がボトルネックになるため
- そのため、Vite はプロダクションビルドでは、 Rollup を使ってバンドルをしている
- 前述の通り、esbuild はまだベータステージのため、 Rollup の方が成熟しているというのも理由にあるよう
- 開発と本番で別のバンドルツールを使っている状態になっているため、Rollup 互換である Rust 製の Rolldown に切り替える取り組みが進行中
フロントエンドは進化が速く面白いですね。
競合的なツールとしては、TurboPack などもあり、今後もどんどん変わっていきそうです。
Vite の利点としては、開発のビルドパフォーマンス以外にも様々ありそうなため、そこらへんは触っていきながら徐々に理解を深めていこうと思います。
コメントを送る
コメントはブログオーナーのみ閲覧できます