好好復(fù)習(xí)，天天向上~八股文還是要背背
Vite 原理（前端面試高頻考點(diǎn)，精簡好記版）
核心一句話：Vite 利用瀏覽器原生 ES Modules（ESM），開發(fā)階段不打包、按需編譯，啟動(dòng)極快；生產(chǎn)環(huán)境用 Rollup 打包，兼顧體積與兼容性。
1. 開發(fā)環(huán)境原理（核心亮點(diǎn)）
① 基于瀏覽器原生 ESM
- 現(xiàn)代瀏覽器支持
<script type="module"> - 瀏覽器會(huì)自動(dòng)發(fā)起請求去加載對(duì)應(yīng)的
import模塊 - Vite 做的是：啟動(dòng)一個(gè) dev server，攔截這些請求，實(shí)時(shí)編譯后返回
② 不進(jìn)行全量打包
- Webpack 等是：啟動(dòng)前先把所有依賴打包成 bundle
- Vite：啟動(dòng)時(shí)不打包，只預(yù)構(gòu)建依賴，代碼文件用到哪個(gè)才編譯哪個(gè)
→ 所以項(xiàng)目越大，Vite 啟動(dòng)速度優(yōu)勢越明顯
③ 依賴預(yù)構(gòu)建（Dependency Pre-bundling）
- 目的：
- 將 CommonJS/UMD 依賴轉(zhuǎn)為 ESM
- 把多個(gè)依賴文件打包成一個(gè)，減少請求數(shù)量
- 工具：esbuild（Go 編寫，比 Webpack 快 10~100 倍）
④ 熱更新（HMR）極致快
- Webpack 修改文件后要重新編譯相關(guān) chunk
- Vite 利用 ESM 特性：
- 只精準(zhǔn)熱更新修改的模塊
- 不刷新頁面，不重新編譯無關(guān)代碼
- 緩存機(jī)制保證極快響應(yīng)
2. 生產(chǎn)環(huán)境原理
- 開發(fā)用 esbuild 提速
-
生產(chǎn)環(huán)境默認(rèn)使用 Rollup 打包
原因：- esbuild 快，但代碼分割、CSS 處理、兼容、tree-shaking不如 Rollup 成熟
- Vite 在 Rollup 之上做了一層優(yōu)化配置，保證打包體積與性能
3. 整體工作流程（一句話串起來）
- 啟動(dòng) dev server
- 對(duì)第三方依賴做 esbuild 預(yù)構(gòu)建
- 瀏覽器加載入口 ESM 文件
- 攔截瀏覽器的 import 請求
- 實(shí)時(shí)編譯 Vue/TS/JSX 等文件并返回
- 修改文件時(shí)，精準(zhǔn) HMR 熱更新
- 生產(chǎn)構(gòu)建時(shí)，使用 Rollup 打包輸出
4. 面試標(biāo)準(zhǔn)回答（背這個(gè)）
Vite 的核心原理是利用瀏覽器原生支持 ES Module，在開發(fā)環(huán)境下不需要像 Webpack 那樣全量打包，而是啟動(dòng)一個(gè)開發(fā)服務(wù)器，攔截瀏覽器發(fā)起的模塊請求，實(shí)時(shí)編譯并返回對(duì)應(yīng)文件，實(shí)現(xiàn)按需加載、按需編譯，所以啟動(dòng)非常快。
同時(shí)它會(huì)用 esbuild 對(duì)第三方依賴進(jìn)行預(yù)構(gòu)建，把 CommonJS 轉(zhuǎn)成 ESM 并減少請求。熱更新也是只更新修改的模塊，速度極快。
生產(chǎn)環(huán)境則基于 Rollup 打包，保證構(gòu)建產(chǎn)物的兼容性和打包優(yōu)化能力。
5. 常被追問
為什么開發(fā)用 esbuild，生產(chǎn)用 Rollup？
答：esbuild 快但生態(tài)和優(yōu)化不如 Rollup 成熟，生產(chǎn)需要更穩(wěn)定的代碼分割、搖樹、兼容等能力。Vite 比 Webpack 快在哪？
答：免打包 + 按需編譯 + esbuild 預(yù)構(gòu)建 + 精準(zhǔn) HMR。
需要我順便給你整理 Vite + Vue3 項(xiàng)目優(yōu)化面試題 嗎？
