Vite
Native ESMとブラウザを活用することでHMRがアプリケーションサイズによって遅くなる問題を解決したdev server ブラウザでESMが扱えるようになるまでは、JSをモジュールとして扱うnativeの方法をもっていなかった このため、モジュールをブラウザで動くファイルにくっつける「bundler」が必要だった
bundling": using tools that crawl, process and concatenate our source modules into files that can run in the browser.
デカイアプリケーションを書き始めると、指数関数的に扱うJSのコードが増える
数千モジュールあるのはおかしくない
JSベースのツールが遅い
HMRを使っていてもdevサーバが立つまでめっちゃ（数分とか）待たされる 編集したファイルがブラウザに反映されるまで数秒かかる
JSが遅いというより、中間レイヤーがなくなればもっと早くできるということkadoyau.icon
slow feedback loopは生産性と幸福度に大きく影響する
Viteはこの問題を解決する進んだエコシステムをつかうことで解決する
ブラウザでのnative ESMの可能性
naviteにコンパイルできる言語で書かれたJSツールを使う
サーバー立ち上がりおそおそ問題
modulesをdependenciesとsorce codeに分けることで解決する
dependencies
大部分は開発中に変更されないJS
数百のモジュールからなるコンポーネントライブラリのようなものは処理に時間がかかる
ESMやCommonJSでshippedされる
VIteはpre-buildes dependencyをesbuildで行うのではやい source code
JSに変換する必要があるコードを含んでいる
例：JSX, CSS, Vue/Svelte components
開発中にめっちゃ編集される
同時にロードしなくてもいいコードが有る
route-based code-splitting
Viteはコードをnative ESM上で配信する
bundlerのジョブの一部をブラウザにまかせるということ
いままではbundleしてからサーバーを立ち上げていた
https://gyazo.com/9affcc8711ebfcd3d3cc7269c57ced52
Viteでは、conditional dynamic importsの背後のコードは現在の画面で必要になった場合にだけ処理される
https://gyazo.com/916a6df6ac5972e0594a1be4c5fff31c
アプデでっかいおそ問題
bundler based build setpuにおいて、ファイルを編集したときに全部のbundleをやりなおすのは非効率
アプリが大きくなったら線形に遅くなる
そんなことはわかっていて、bundlerも工夫してる
in memoryでbundleする
pros ファイルが変更されたときmodule graphの一部を無効にすればいい
cons すべてのbundleの再構築とウェブページのリロードが必要
bundleの再構築はハイコスト
リロードすると現在のapplicationの状態が消えてしまう
pros 上のconsを解決する
bundleの再構築はしなくていいの？kadoyau.icon
cons 実際にはアプリケーションのサイズが大きくなると、HMRはかなり遅くなる
Viteの工夫
native ESM上でHMRするので、アプリケーションのサイズに関わらず、HMRの更新は一定速度になる
編集されたmoduleと近接するHMR boundary（殆どの場合module自体だけ）のchainを無効にすればいいだけになるから早いらしい
普通のHMRだとこれに加えて何をやってるんだろうkadoyau.icon
full page reloadのためにHTTPヘッダをちゃんとつける（ブラウザのキャッシュをうまく使う）
source code moduleのリクエストは304 Not Modifiedを通じて作られる
dependency moduleのリクエストは最大限キャッシュする
Cache-Control: max-age=31536000, immutable
なんでProductionではBundleするの
ESMは広くサポートされるようになったとはいえ、バンドルされていないESMを配信するには時期尚早だから（HTTP/2だとしても）
nested importで通信が走りまくる（遅い）
なんでesbuildでBundleしないの
アプリケーションのバンドルに必要な機能がまだ実装されていないから
Viteとスコープが同じ
production buildにはRollupの手動の設定が必要
Vite 3.0