Viteの仕組み
すごく単純に書くと以下のステップで行われる
特定のルートにアクセスされたタイミングで必要なファイルのみレスポンスされる ファイルに変更があった場合は新しくレスポンスされる 変更がなかった場合は304(ブラウザのレスポンス)が返される
特定のルートにアクセスされたタイミングで必要なファイルのみレスポンスされる
これがvueの場合はほとんどすべてになるのでブラウザにほとんどのファイルがキャッシュされてはいるがそもそもその取得に時間がかかっているといった状況
そもそも依存しているファイルを切り分けたり、特定のファイルの依存状況を見ないようにすればいくらかはやくなりそう
→できるだけ動的インポートを利用する
rollupによるbuildはそもそも単一ファイルになるので影響ないはず,,,
vue router のdynamic import.
https://router.vuejs.org/guide/advanced/lazy-loading
viteは何故早い
導入するには以下の確認が必要
- dynamic import(code splitting) を行なっているかどうか
- していないと全てのコードを毎回importしてしまう
- 場合によってはviteを使わない方が良い