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

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

反饋

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

一、Vite 介紹

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

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

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

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

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

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

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

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

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

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

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

??? 4、適用場(chǎng)景與限制

適用場(chǎng)景：

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

限制與注意事項(xiàng)：

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

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

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

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

三、Vite 的原理——像“奶茶店點(diǎn)單”一樣高效

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

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

四、3 分鐘搭好第一個(gè) Vite 項(xiàng)目

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

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


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


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


# 4. 啟動(dòng)！
npm run dev

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

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

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

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

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

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


// 2. 創(chuàng)建圖片節(jié)點(diǎn)
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 居中漸變背景，整個(gè)過程不到 1 秒。
在編程獅《前端Vite學(xué)習(xí)指南》課程里，會(huì)教你基于騰訊云 webify 進(jìn)行部署。

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

vite.config.js

import { defineConfig } from 'vite';


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

八、與 Vue/React 無縫搭檔

Vue 項(xiàng)目：npm create vite@latest 我的vue項(xiàng)目 -- --template vue
React 項(xiàng)目：npm create vite@latest 我的react項(xiàng)目 -- --template react-ts

模板一鍵生成，無需手動(dòng)配置 webpack。想系統(tǒng)學(xué)？請(qǐng)?jiān)L問編程獅免費(fèi)教程《Vite 教程》。

九、打包上線：一條命令生成極速產(chǎn)物

npm run build

生成的 dist/ 文件夾體積小、自帶 CDN 友好哈希，可直接扔到阿里云 OSS 或 GitHub Pages。
若需兼容舊瀏覽器，安裝 @vitejs/plugin-legacy 即可。

十、結(jié)語

Vite 不是“又一個(gè)輪子”，而是前端開發(fā)體驗(yàn)的革命。
跟著本教程動(dòng)手 10 分鐘，你就能感受到“保存即見”的爽快感。接下來，把項(xiàng)目上傳到 GitHub，用 GitHub Actions 自動(dòng)部署，你就擁有了屬于自己的在線 Demo。
更多驚喜，盡在編程獅（w3cschool.cn）。

前端

0 人點(diǎn)贊