Overview
Vite is a development tool for building web app front ends, downloaded about 195 million times a week on npm and used under the hood by frameworks such as Nuxt and Astro. This video explains why TypeScript, JSX and npm packages need processing before the browser can run them, why bundler-based dev servers such as webpack’s slowed down as apps grew, and how Vite stays fast by letting the browser’s native ES Modules request files and transforming only what is asked for.
It also traces Vite’s history, from Evan You’s 226-line first commit in April 2020 to Vite 8, and walks through the dev server, HMR, plugins and production builds.
Key Points
- Vite separates rarely changing dependencies, which are pre-bundled once at startup, from your own code, which is transformed file by file on request through the resolveId, load and transform steps.
- Your own code is cached with ETag and 304 responses, while dependencies get a one-year immutable cache because their URLs carry a hash.
- HMR walks up the module graph from the changed file to the nearest boundary that accepts updates, then tells the browser over WebSocket to refetch just that module.
- Plugins follow Rollup’s hook interface, so the same plugin runs in development and in production. Vite 8 replaced the esbuild and Rollup pair with a single bundler, Rolldown.
- Vite 8.1 adds an experimental mode that bundles during development too, and the Environment API handles runtimes other than the browser.
Chapters
- 0:00 Introduction
- 0:36 Chapter 1: Getting code to the browser
- 1:32 Chapter 2: Bundling everything before starting
- 2:15 Chapter 3: Transforming only what is requested
- 2:56 Chapter 4: The history of Vite
- 6:33 Chapter 5: Inside the dev server
- 8:11 Chapter 6: Dependency pre-bundling
- 9:10 Chapter 7: HMR
- 10:44 Chapter 8: Plugins
- 11:37 Chapter 9: Production builds and Rolldown
- 12:54 Chapter 10: The future of Vite
- 13:58 Summary
概要
ViteはWebアプリの画面を作るときに使う開発ツールで、npmでは週に約1億9,500万回ダウンロードされ、NuxtやAstroなど多くのフレームワークが内部で使っています。この動画では、TypeScriptやJSX、npmのパッケージをブラウザで動かす前に処理が必要な理由、webpackのようなバンドラーの開発サーバーがアプリの成長とともに遅くなった理由、そしてブラウザのES Modulesにファイルを取りに行かせ、頼まれた分だけを変換することでViteが速さを保つ仕組みを解説します。
あわせて、2020年4月にEvan Youが書いた226行の最初のコミットからVite 8までの歴史をたどり、開発サーバー、HMR、プラグイン、本番ビルドの中身を順に見ていきます。
ポイント
- Viteは、めったに変わらない依存パッケージと自分のコードを分けて扱います。依存は起動時に1度だけ事前バンドルし、自分のコードはリクエストのたびにresolveId、load、transformの3段階で1ファイルずつ変換します。
- 自分のコードはETagと304でキャッシュし、依存はURLにハッシュが付くので1年のimmutableなキャッシュを付けます。
- HMRでは、変更したファイルからモジュールグラフを上へたどって変更を受け止める一番近い境界を探し、WebSocketでブラウザに知らせてそのモジュールだけを取り直させます。
- プラグインはRollupのフックの形に合わせてあるため、同じプラグインが開発と本番の両方で動きます。Vite 8では、esbuildとRollupの2本立てをやめ、バンドラーをRolldownに1本化しました。
- Vite 8.1では開発中もまとめる実験的なモードが入り、Environment APIによってブラウザ以外の実行環境も扱えるようになっています。