Vite

1. 定义

Vite 是一个现代前端构建工具 / 开发服务器，由 Vue 作者尤雨溪开发。它提供极快的开发时启动和热更新，并在生产构建时打包出优化过的产物。定位是 webpack / Create React App 这类传统脚手架的替代品。名字来自法语 “vite”（意为”快”），读音近似 “veet”。

一句话：Vite 让你 npm create 一下就得到一个开箱即用、启动秒开、改代码即时刷新的前端项目。

2. Vite 解决了什么问题

传统 webpack 类工具的痛点：

问题	webpack / CRA	Vite
开发启动慢	启动前要把整个应用打包一遍，大项目几十秒	不打包，直接起服务，毫秒~秒级
热更新 (HMR) 慢	项目越大，改一行等越久	基于原生 ESM，只更新改动的模块，几乎瞬时
配置复杂	webpack 配置项繁多，心智负担重	约定优于配置，开箱即用，配置极简
生产/开发不一致	两套逻辑	开发用 esbuild，生产用 Rollup，各取所长

3. 核心机制：dev 用原生 ESM + esbuild，build 用 Rollup

Vite 最关键的设计是开发和生产用两套不同引擎：

开发模式 (vite / vite dev)
  ├─ 不打包整个应用
  ├─ 利用浏览器原生 ES Module，按需请求单个文件
  ├─ 用 esbuild（Go 写的，极快）转译 TS/JSX
  └─ 结果：启动秒开，HMR 瞬时

生产模式 (vite build)
  └─ 用 Rollup 打包，做 tree-shaking、代码分割、压缩，产出优化后的静态文件

为什么开发不打包就快？

传统工具启动前要把成千个模块合并打包，才能给浏览器
Vite 直接起一个 dev server，浏览器请求哪个模块就转译哪个（按需），没被访问的代码根本不处理
依赖（如 react、lodash）用 esbuild 预构建一次并缓存，之后不再重复处理

为什么生产不继续用 esbuild？因为 esbuild 的代码分割、产物优化还不够成熟，Rollup 在这方面更强。Vite 就”开发要快用 esbuild，上线要稳用 Rollup”。

4. 常用命令

# 创建项目（会交互式选框架模板）
npm create vite@latest my-app
pnpm create vite my-app --template react-ts   # 直接指定模板
bun create vite my-app                         # 用 bun 也行
 
# 项目内
npm install                  # 装依赖
npm run dev                  # 启动开发服务器（默认 http://localhost:5173）
npm run build                # 生产构建，输出到 dist/
npm run preview              # 本地预览生产构建的产物

常见模板 (--template)：vanilla vanilla-ts react react-ts vue vue-ts svelte preact lit 等。

5. Vite vs webpack vs CRA 速查

维度	webpack	Create React App	Vite
开发启动	慢（先全量打包）	慢（基于 webpack）	极快（不打包）
HMR 速度	随项目变慢	随项目变慢	始终很快
底层引擎	webpack	webpack	dev: esbuild / build: Rollup
配置复杂度	高	被封装（难自定义）	低，开箱即用
框架支持	通用	仅 React	Vue/React/Svelte/原生等通用
现状	老项目仍多	官方已不推荐	新项目主流选择

6. 配置文件示例

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,             // 自定义开发端口
    proxy: {                // 开发时把 /api 转发到后端，解决跨域
      "/api": "http://localhost:8080",
    },
  },
  build: {
    outDir: "dist",         // 构建输出目录
    sourcemap: true,
  },
});

7. 常见坑

环境变量必须以 VITE_ 开头：只有 VITE_ 前缀的变量会暴露给客户端代码（通过 import.meta.env.VITE_XXX），其他的不注入，防止泄露密钥
用 import.meta.env 而非 process.env：Vite 不是 Node 环境，读环境变量走 import.meta.env
dev 正常但 build 后报错：开发用 esbuild、生产用 Rollup，两者行为略有差异；上线前一定要 build + preview 验证
静态资源路径：放 public/ 的资源用绝对路径 /xxx 引用；import 进来的资源 Vite 会处理并加 hash
CommonJS 依赖报错：Vite 基于 ESM，少数只有 CJS 的老包可能需要在 optimizeDeps 里配置预构建
部署到子路径 404：部署到 example.com/app/ 这类子目录，要在配置里设 base: "/app/"

8. 延伸阅读 / 关联概念

esbuild — Vite 开发模式的转译引擎，速度的来源；见 esbuild.md
Rollup — Vite 生产构建的打包器，Vite 插件体系兼容 Rollup 插件
ESM (ES Modules) — 浏览器原生模块系统，是 Vite 免打包快启动的基础
HMR (Hot Module Replacement) — 模块热替换，改代码不刷新整页只更新对应模块
Bun — bun create vite 也能创建 Vite 项目，且用 bun 装包更快；见 bun.md
官方文档：https://vite.dev/

第二大脑 / Knowledge Bank

探索

vite