Vite 是什么？

核心概念 (What)

Vite（法语意为 “快速”，发音 /vit/）是由 Vue.js 作者尤雨溪开发的新一代前端构建工具，旨在解决传统构建工具（如 Webpack）在大型项目中开发体验不佳的问题。它整合了开发服务器和构建工具的功能，为现代前端项目提供极速的开发体验和高效的生产构建。

工作原理 (How)

Vite 的核心优势源于其独特的架构设计：

1. 开发阶段（Dev Server）：
   • 利用浏览器原生的 ES 模块（ESM） 支持，直接向浏览器提供源码，无需打包。
   • 对第三方依赖进行预构建（使用 esbuild，比 JavaScript 编写的工具快 10-100 倍），将 CommonJS/UMD 格式转为 ESM，并优化依赖解析。
   • 实现按需编译，只编译当前请求的模块，而非整个项目。
2. 生产阶段（Build）：
   • 使用成熟的 Rollup 进行打包，针对生产环境做了优化配置，生成高度优化的静态资源。

相比之下，Webpack 等传统工具在开发阶段需要先打包整个项目才能启动，项目越大启动越慢；而 Vite 实现了 “即时启动” 和 “极速热更新”。

使用场景与示例 (When & Where)

Vite 适用于构建现代前端项目，尤其适合 Vue、React、Svelte 等框架的开发：

1. 创建 Vite 项目（以 Vue 为例）

# npm
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

2. 启动开发服务器

cd my-vue-app
npm install
npm run dev

此时开发服务器会瞬间启动（通常几百毫秒），修改代码后热更新也几乎无延迟。

3. 构建生产版本

npm run build

总结

• Vite 是新一代前端构建工具，主打极速的开发体验，替代传统的 Webpack 开发模式。
• 核心优势：基于 ESM 的即时启动、按需编译、极速热更新，生产构建基于 Rollup 优化。
• 主要用途：开发 Vue/React/Svelte 等现代前端项目，大幅提升开发效率。