<style> .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5 { text-transform: none; } </style> ## Vite はなぜ早いのか  --- ## 期待値コントロール - 制作時間 1 時間くらいのぺらぺらトーク。 - ハードル下げて聞いてくれ。 - フロントエンドわからん人はすまん。内職してくれ。 --- ## そもそも Vite とは 主にフロントエンド向けのビルドツール。 昔でいう create-react-app とか vue-cli に相当するもの。 Vue/React/Svelte とか向けのビルドツール。 (Java で言えば gradle だと思う) Vue の作者の Evan You が作ってる。  --- ## Vite は早い 中規模くらいの Vue アプリで移行をしたところ以下くらい違う。 ```console vue-cli 開発サーバーの起動: 12.456 s ビルド: 25.48 s vite 開発サーバーの起動: 160 ms ビルド: 11.19 s ``` --- ## なぜはやいのか？ それが気になったので調べてみた。 以下が理由っぽい - esbuild を使ってる - ネイティブ ESM を使ってる - 最適化 --- ## esbuild とは esbuild とは Go で書かれたビルドツール。 https://esbuild.github.io/  --- ## esbuild とは - そもそも Go で書かれた時点で webpack より早い。 - 並列化されまくってるらしい --- ## ネイティブ ESM とは ECMAScript の仕様の一部であるモジュールシステム。 (いままで JS は仕様として import/export 構文を持ってなかったけど ES2015 から追加された) バンドルという処理自体がクソ重い → import/export の解決を行わずブラウザにやってもらうことで解決 (ただし、本番環境ではクライアントとサーバーの通信を減らす必要があるため、引き続きバンドルがいる) --- ## 最適化 - 頻繁に変換されない node_modules 以下等のライブラリは先に変換処理をかけておく - CJS を先に ESM にしておくとか - ESM の依存グラフをたどってファイルが更新されると関係あるモジュールだけビルドする --- ## ついでに Turbopack の話 Vercel によって webpack や vite を置き換えるものとして Turbopack が出た。 Vite と異なる点 - バンドルしないアプローチを取った Vite に対して、クソ早くバンドルすることを選んだ - バンドルという行為は最適化した - デフォルトで swc を利用 - swc とはRust 製の JS/TS コンパイル・バンドルツール --- ## ちょっとしたひと悶着 Vercel < Turborepo は Vite の 10 倍早い → Evan You 怒 https://github.com/yyx990803/vite-vs-next-turbo-hmr/discussions/8 Evan You の言い分(もっと色々言ってる) - 自分で測ったけどそんな速くない - → ベンチマーク方法を教えろ - 両方 swc 使った状態で比較しろ - モジュール数 30k 超えると 10 倍差がつくって言ってるけどそんなケースありえんだろ --- ## 個人的見解 - パフォーマンスは同じくらい - Turbopack は beta やし、本番で全く使えん - 後発で後継をここまで追い抜けるの Vercel すごい --- ## まとめ - Vite は早い - esbuild - ネイティブ ESM - Turbopack に期待 ---