Vite 是什么？一篇读懂前端“光速”构建神器的超友好教程
一、Vite 介绍
Vite 是一款由 Vue.js 创始人尤雨溪（Evan You）团队开发的现代前端构建工具，诞生于 2019 年，旨在解决传统构建工具（如 Webpack）在大型项目中因 JavaScript 性能限制导致的开发效率瓶颈。其名称源于法语单词 “vite”（意为“快速”），精准概括了其核心优势：极致的开发体验速度 。
⚙️ 1、核心设计理念与工作原理
Vite 的核心创新在于明确区分开发与生产环境，并利用现代浏览器特性优化流程：
①. 开发环境：基于原生 ES 模块（ESM）的按需编译
无打包启动：传统工具需预先打包整个应用，而 Vite 直接启动服务器，浏览器通过原生 ESM 动态请求模块。
按需编译：仅当浏览器请求某个模块时，Vite 才实时编译该文件（如转换 TypeScript、JSX），大幅减少计算量 。
依赖预构建：使用 Go 语言编写的 esbuild 工具预编译第三方依赖（CommonJS → ESM），速度比 JavaScript 工具快 10–100 倍 。
②. 生产环境：Rollup 高效打包优化
使用 Rollup 进行静态资源打包，支持 Tree Shaking、代码分割、压缩等优化，确保生产包体积最小化 。
⚡ 2、核心优势与特性
特性
技术实现
用户体验
极速冷启动
跳过全量打包，依赖预构建 + 按需编译
大型项目启动时间从分钟级降至毫秒级
高效 HMR
基于 ESM 的精准模块热替换，仅更新受影响模块
代码修改后页面更新几乎无延迟
开箱即用
内置支持 TypeScript、JSX、CSS 预处理器、静态资源处理等
免配置即可使用现代开发栈
轻量灵活
插件系统兼容 Rollup 生态，扩展性强
可快速集成 PWA、Mock 数据等功能
🔍 3、与传统构建工具（如 Webpack）对比
对比维度
Vite
Webpack
启动速度
✅ 毫秒级（按需编译）
⚠️ 随项目规模线性增长
HMR 效率
✅ 极快，与项目规模无关
⚠️ 规模越大越慢
生产构建
✅ Rollup 优化打包
✅ Webpack 自身（需复杂配置）
配置复杂度
✅ 简单
⚠️ 复杂
生态成熟度
⚠️ 快速成长中
✅ 极其丰富
🛠️ 4、适用场景与限制
适用场景：
新项目开发：尤其适合 Vue/React/Svelte 等框架的 SPA 或 SSR 应用 。
大型项目迁移：显著提升开发效率，已有成熟迁移方案 。
微前端架构：原生支持动态导入，实现运行时按需加载 。
快速原型验证：通过 npm create vite 一键生成模板项目 。
限制与注意事项：
浏览器兼容性：旧版浏览器（如 IE11）需通过 @vitejs/plugin-legacy 添加 Polyfill 。
HTTP 请求数：开发环境大量模块请求可能引发并发瓶颈（可通过 HTTP/2 缓解）。
插件生态：部分 Webpack 插件无直接替代品，需依赖社区适配 。
注：Vite 需 Node.js 18+ 或 20+ 环境运行，可通过 npm create vite@latest 快速创建项目。
二、为什么又出新工具？——从“漫长等待”到“秒开页面”
在传统打包工具（如 webpack）时代，项目越大，启动和热更新就越慢。
Vite（读音 /vit/，法语“快”的意思）用“原生 ES 模块 + 按需编译”的思路，把冷启动时间从几十秒压缩到 1 秒内，热更新更是毫秒级。
一句话：Vite 让你写代码时“保存即见效果”，彻底告别“漫长等待”。
三、Vite 的原理——像“奶茶店点单”一样高效
冷启动：只预编译第三方依赖（esbuild，Go 写的，巨快）。
热更新：浏览器直接请求改动过的单文件，其他文件不动。
类比：
传统打包 ≈ 一次性做 100 杯奶茶再上桌；
Vite ≈ 顾客点一杯做一杯，其余原料提前摆好。
四、3 分钟搭好第一个 Vite 项目
跟着敲，小白也能一次跑通。
# 1. 安装 Node.js（>=18）
node -v
# 2. 用官方脚手架创建项目
npm create vite@latest 我的第一个网页 -- --template vanilla
# 3. 进入目录并安装依赖
cd 我的第一个网页
npm install
# 4. 启动！
npm run dev
看到终端出现
➜ Local: http://localhost:5173/
浏览器秒开示例页，恭喜你完成了“编程狮光速起步”。
五、目录结构速读（中文对照版）
我的第一个网页/
├─ index.html 入口页面
├─ package.json 项目说明书
├─ vite.config.js Vite 配置文件（可改端口、代理）
├─ 源代码/
│ ├─ main.js 主逻辑
│ ├─ style.css 样式
│ └─ 资源/ 图片/字体等静态文件
六、实战演练：5 行代码加一个图片热更新
在 源代码 文件夹放一张 编程狮logo.png。
修改 main.js：
// 1. 引入样式
import './style.css';
// 2. 创建图片节点
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学习指南》课程里，会教你基于腾讯云 webify 进行部署。
七、常见配置 3 连发（复制即可用）
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/, '')
}
}
}
});
八、与 Vue/React 无缝搭档
Vue 项目：npm create vite@latest 我的vue项目 -- --template vue
React 项目：npm create vite@latest 我的react项目 -- --template react-ts
模板一键生成，无需手动配置 webpack。想系统学？请访问编程狮免费教程《Vite 教程》。
九、打包上线：一条命令生成极速产物
npm run build
生成的 dist/ 文件夹体积小、自带 CDN 友好哈希，可直接扔到阿里云 OSS 或 GitHub Pages。
若需兼容旧浏览器，安装 @vitejs/plugin-legacy 即可。
十、结语
Vite 不是“又一个轮子”，而是前端开发体验的革命。
跟着本教程动手 10 分钟，你就能感受到“保存即见”的爽快感。接下来，把项目上传到 GitHub，用 GitHub Actions 自动部署，你就拥有了属于自己的在线 Demo。
更多惊喜，尽在编程狮（w3cschool.cn）。