Vite 是什么？3 分鐘搞懂現(xiàn)代前端極速構(gòu)建工具

編程獅（w3cschool.cn） 2025-08-15 14:29:55 瀏覽數(shù) (1625)

反饋

Vite 是什么？一篇讀懂前端“光速”構(gòu)建神器的超友好教程

一、Vite 介紹

Vite 是一款由 Vue.js 創(chuàng)始人尤雨溪（Evan You）團隊開發(fā)的現(xiàn)代前端構(gòu)建工具，誕生于 2019 年，旨在解決傳統(tǒng)構(gòu)建工具（如 Webpack）在大型項目中因 JavaScript 性能限制導(dǎo)致的開發(fā)效率瓶頸。其名稱源于法語單詞 “vite”（意為“快速”），精準(zhǔn)概括了其核心優(yōu)勢：極致的開發(fā)體驗速度 。

?? 1、核心設(shè)計理念與工作原理

Vite 的核心創(chuàng)新在于明確區(qū)分開發(fā)與生產(chǎn)環(huán)境，并利用現(xiàn)代瀏覽器特性優(yōu)化流程：

①. 開發(fā)環(huán)境：基于原生 ES 模塊（ESM）的按需編譯

無打包啟動：傳統(tǒng)工具需預(yù)先打包整個應(yīng)用，而 Vite 直接啟動服務(wù)器，瀏覽器通過原生 ESM 動態(tài)請求模塊。
按需編譯：僅當(dāng)瀏覽器請求某個模塊時，Vite 才實時編譯該文件（如轉(zhuǎn)換 TypeScript、JSX），大幅減少計算量。
依賴預(yù)構(gòu)建：使用 Go 語言編寫的 esbuild 工具預(yù)編譯第三方依賴（CommonJS → ESM），速度比 JavaScript 工具快 10–100 倍。

②. 生產(chǎn)環(huán)境：Rollup 高效打包優(yōu)化

使用 Rollup 進行靜態(tài)資源打包，支持 Tree Shaking、代碼分割、壓縮等優(yōu)化，確保生產(chǎn)包體積最小化。

? 2、核心優(yōu)勢與特性

特性	技術(shù)實現(xiàn)	用戶體驗
極速冷啟動	跳過全量打包，依賴預(yù)構(gòu)建 + 按需編譯	大型項目啟動時間從分鐘級降至毫秒級
高效 HMR	基于 ESM 的精準(zhǔn)模塊熱替換，僅更新受影響模塊	代碼修改后頁面更新幾乎無延遲
開箱即用	內(nèi)置支持 TypeScript、JSX、CSS 預(yù)處理器、靜態(tài)資源處理等	免配置即可使用現(xiàn)代開發(fā)棧
輕量靈活	插件系統(tǒng)兼容 Rollup 生態(tài)，擴展性強	可快速集成 PWA、Mock 數(shù)據(jù)等功能

?? 3、與傳統(tǒng)構(gòu)建工具（如 Webpack）對比

對比維度	Vite	Webpack
啟動速度	? 毫秒級（按需編譯）	?? 隨項目規(guī)模線性增長
HMR 效率	? 極快，與項目規(guī)模無關(guān)	?? 規(guī)模越大越慢
生產(chǎn)構(gòu)建	? Rollup 優(yōu)化打包	? Webpack 自身（需復(fù)雜配置）
配置復(fù)雜度	? 簡單	?? 復(fù)雜
生態(tài)成熟度	?? 快速成長中	? 極其豐富

??? 4、適用場景與限制

適用場景：

新項目開發(fā)：尤其適合 Vue/React/Svelte 等框架的 SPA 或 SSR 應(yīng)用。
大型項目遷移：顯著提升開發(fā)效率，已有成熟遷移方案。
微前端架構(gòu)：原生支持動態(tài)導(dǎo)入，實現(xiàn)運行時按需加載。
快速原型驗證：通過 npm create vite 一鍵生成模板項目。

限制與注意事項：

瀏覽器兼容性：舊版瀏覽器（如 IE11）需通過 @vitejs/plugin-legacy 添加 Polyfill 。
HTTP 請求數(shù)：開發(fā)環(huán)境大量模塊請求可能引發(fā)并發(fā)瓶頸（可通過 HTTP/2 緩解）。
插件生態(tài)：部分 Webpack 插件無直接替代品，需依賴社區(qū)適配。

注：Vite 需 Node.js 18+ 或 20+ 環(huán)境運行，可通過 npm create vite@latest 快速創(chuàng)建項目。

二、為什么又出新工具？——從“漫長等待”到“秒開頁面”

在傳統(tǒng)打包工具（如 webpack）時代，項目越大，啟動和熱更新就越慢。
Vite（讀音 /vit/，法語“快”的意思）用“原生 ES 模塊 + 按需編譯”的思路，把冷啟動時間從幾十秒壓縮到 1 秒內(nèi)，熱更新更是毫秒級。
一句話：Vite 讓你寫代碼時“保存即見效果”，徹底告別“漫長等待”。

三、Vite 的原理——像“奶茶店點單”一樣高效

冷啟動：只預(yù)編譯第三方依賴（esbuild，Go 寫的，巨快）。
熱更新：瀏覽器直接請求改動過的單文件，其他文件不動。

類比：
傳統(tǒng)打包 ≈ 一次性做 100 杯奶茶再上桌；
Vite ≈ 顧客點一杯做一杯，其余原料提前擺好。

四、3 分鐘搭好第一個 Vite 項目

跟著敲，小白也能一次跑通。

# 1. 安裝 Node.js（>=18）
node -v


# 2. 用官方腳手架創(chuàng)建項目
npm create vite@latest 我的第一個網(wǎng)頁 -- --template vanilla


# 3. 進入目錄并安裝依賴
cd 我的第一個網(wǎng)頁
npm install


# 4. 啟動！
npm run dev

看到終端出現(xiàn)
? Local: http://localhost:5173/
瀏覽器秒開示例頁，恭喜你完成了“編程獅光速起步”。

五、目錄結(jié)構(gòu)速讀（中文對照版）

我的第一個網(wǎng)頁/
├─ index.html        入口頁面
├─ package.json      項目說明書
├─ vite.config.js    Vite 配置文件（可改端口、代理）
├─ 源代碼/
│  ├─ main.js        主邏輯
│  ├─ style.css      樣式
│  └─ 資源/          圖片/字體等靜態(tài)文件

六、實戰(zhàn)演練：5 行代碼加一個圖片熱更新

在 源代碼 文件夾放一張編程獅logo.png。
修改 main.js：

// 1. 引入樣式
import './style.css';


// 2. 創(chuàng)建圖片節(jié)點
const 圖片 = document.createElement('img');
圖片.src = 'https://atts.w3cschool.cn/images%2Fw3c%2F20220506-154940.png';
圖片.style.width = '150px';


// 3. 插入頁面
document.querySelector('#app').appendChild(圖片);

修改 style.css：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

保存后頁面立即刷新，logo 居中漸變背景，整個過程不到 1 秒。
在編程獅《前端Vite學(xué)習(xí)指南》課程里，會教你基于騰訊云 webify 進行部署。

七、常見配置 3 連發(fā)（復(fù)制即可用）

vite.config.js

import { defineConfig } from 'vite';


export default defineConfig({
  server: {
    port: 3000,               // 自定義端口
    open: true,               // 自動打開瀏覽器
    proxy: {                  // 反向代理，解決跨域
      '/api': {
        target: 'https://api.w3cschool.cn',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
});