文章目录
- Vite 是什么？
- Vite 与 Node 的关系
- Vite 的核心特性
- 1. 极快的冷启动
- 2. 按需编译
- 3. 预构建依赖
- 4. 热模块替换（HMR）
- 5. 生产打包使用 Rollup
- Vite 的工作原理
- 开发环境
- 生产构建
- Vite 的典型使用场景
- 与 Webpack 等传统工具的对比
- 如何在 Node 中使用 Vite
- 安装
- 启动开发服务器
- 构建生产版本
- 预览构建结果
- Vite 的局限性
- 总结
Vite 是什么？
Vite是一个现代化的前端构建工具，由 Vue.js 作者尤雨溪开发。它利用浏览器原生的 ES Modules（ESM）特性，提供了极快的开发服务器启动速度和热模块替换（HMR）性能。
虽然 Vite 本身是一个独立的构建工具，但它运行在 Node.js 环境中（通过 Node 执行），因此可以理解为“Node 中的 Vite”——即基于 Node.js 平台的前端工具链。
Vite 与 Node 的关系
- Vite 的开发服务器和构建命令（
vite、vite build）都是 Node.js 脚本 - Vite 依赖 Node.js 来解析模块、处理文件系统、运行插件等
- 生产构建时，Vite 会使用 Node.js 调用 Rollup 进行打包
- Vite 的配置文件（
vite.config.js）也是一个 Node.js 模块
简单说：Vite 是一个用 Node.js 编写的工具，你通过 Node 环境来运行它。
Vite 的核心特性
1. 极快的冷启动
传统打包工具（Webpack）需要先打包整个应用才能启动开发服务器。Vite 则直接将源码以原生 ESM 形式提供给浏览器，无需打包，启动时间与项目规模无关。
2. 按需编译
浏览器请求哪个模块，Vite 才编译哪个模块。这使得大型项目的启动和热更新都非常快。
3. 预构建依赖
Vite 使用esbuild（Go 语言编写，极快）预先将 CommonJS / UMD 依赖转换为 ESM，提高性能。
4. 热模块替换（HMR）
Vite 的 HMR 基于原生 ESM，更新边界更精确，速度远超传统打包工具。
5. 生产打包使用 Rollup
开发时利用 ESM 获得速度，生产环境则使用 Rollup 进行优化打包，以获得更好的加载性能。
Vite 的工作原理
开发环境
- 启动一个 HTTP 服务器（基于 Node.js 的
connect） - 浏览器请求
http://localhost:5173/src/main.js等入口文件 - Vite 拦截请求，在内存中编译
.vue、.tsx、.scss等文件 - 返回编译后的 JavaScript（保留 ESM 格式）
- 浏览器直接执行，按需加载依赖模块
生产构建
- 调用 Rollup 进行打包，支持 Tree Shaking、代码分割、压缩等
- 输出静态文件，可部署到任意静态服务器
Vite 的典型使用场景
- Vue 3 / React / Svelte / Lit等现代框架的项目脚手架
- 需要极速开发体验的单页应用（SPA）
- 库或组件的开发（支持输出多种格式：ESM、CJS、UMD）
- 全栈框架的配套（如 Nuxt、SvelteKit 底层使用 Vite）
与 Webpack 等传统工具的对比
| 特性 | Vite | Webpack |
|---|---|---|
| 开发服务器启动 | 即时（无需打包） | 慢（需要打包整个应用） |
| HMR 速度 | 极快，基于 ESM | 中等，需要重新打包部分模块 |
| 生产打包 | Rollup（较慢但可优化） | 功能强大但配置复杂 |
| 配置复杂度 | 简单，零配置开箱即用 | 繁琐，需要大量 loader/plugin |
| 生态 | 较新，但主流框架已支持 | 非常成熟，插件丰富 |
如何在 Node 中使用 Vite
安装
npmcreate vite@latest my-app ----templatevuecdmy-appnpminstall启动开发服务器
npmrun dev# 实际执行 vite构建生产版本
npmrun build# 实际执行 vite build预览构建结果
npmrun preview# 实际执行 vite previewVite 的局限性
- 浏览器必须支持原生 ES Modules（现代浏览器都支持，但旧版 IE 不兼容）
- 开发时每个模块独立请求，在极端大型项目（数千模块）下可能仍有性能瓶颈
- 插件生态相对 Webpack 还不够庞大（但增长迅速）
总结
Vite 是基于 Node.js 的新一代前端构建工具，它利用浏览器原生 ESM 实现了按需编译和极速热更新，彻底解决了传统打包工具在开发体验上的痛点。虽然它内部依赖 esbuild 和 Rollup，但作为开发者，你只需要通过 Node.js 环境简单运行vite命令，即可享受丝滑的开发体验。如果你的项目是现代浏览器环境，Vite 是比 Webpack 更值得推荐的选择。
