初体验 Vite 🎉

什么是 Vite 💎

Vite（发音为 /vit/，类似法语单词 veut，意为"快"）是一种新型前端构建工具，由 Vue.js 作者 尤雨溪（Evan You） 开发，目前已经成为前端领域最流行的构建工具之一。

Vite 能够显著提升前端开发体验，主要包括：

1. 极速的开发服务器启动：使用原生 ESM（ES Modules）实现，无需打包即可启动
2. 即时的热模块替换（HMR）：无论项目大小，HMR 都能保持快速
3. 真正的按需编译：只在浏览器请求时按需转译文件
4. 开箱即用：内置 TypeScript、JSX、CSS Modules、PostCSS 等支持
5. 生产环境优化：基于 Rollup 进行生产打包，自动分割代码、资源优化

官方网站

Vite 官网：https://vitejs.cn/

Vite 中文文档：https://vitejs.cn/guide/

为什么需要 Vite 💎

在 Vite 出现之前，前端开发普遍使用 Webpack 作为构建工具。随着前端项目规模越来越大，Webpack 的弊端逐渐显现：

对比项	Webpack	Vite
启动速度	随代码体积增大而变慢	几乎不受代码量影响
HMR 速度	大型项目中明显卡顿	始终保持快速
配置复杂度	较高，需要各种 loader	零配置开箱即用
构建工具	自身完成	开发用 esbuild，打包用 Rollup
生态成熟度	非常成熟	发展迅速，生态完善

Vite 的核心优势

• 极速冷启动：不需要打包，启动只需几百毫秒
• 即时模块热更新：修改文件后立即生效，无需刷新页面
• 按需编译：只编译当前页面需要的文件，而不是整个项目
• 生产环境优化：使用 Rollup 打包，自动代码分割、Tree Shaking
• TypeScript 开箱即用：内置 TS 转译，无需额外配置
• 多框架支持：不仅支持 Vue，还支持 React、Preact、Svelte 等

Vite 的核心原理 💎

Vite 在开发环境和生产环境使用了不同的策略，这也是它能够"快"的关键。

开发环境 👻

Vite 在开发环境下利用了浏览器原生 ESM 能力，核心思想是：

• 不打包：传统构建工具（Webpack）会先把所有模块打包成 JS 再启动；Vite 则利用浏览器原生支持的 ES Module，按需加载
• esbuild：使用 Go 语言编写的 esbuild 进行依赖预构建（将 CommonJS、UMD 等格式转换为 ESM），速度比 Babel 快 10~100 倍
• 即时编译：服务器会根据浏览器请求，按需编译对应的 TS、SFC、CSS 等文件

浏览器请求 → Vite 拦截 → 找到对应源文件 → 按需编译 → 返回给浏览器

生产环境 👻

生产环境 Vite 使用 Rollup 进行打包，主要优势：

• Tree Shaking：自动移除未使用的代码
• 代码分割：按需加载，减少首屏体积
• 资源优化：CSS 压缩、图片压缩、字体子集化等
• 多页面支持：方便构建多页应用

为什么开发用 esbuild，打包用 Rollup？

• esbuild：速度快，但 Rollup 在生产环境代码压缩、Tree Shaking、生态插件方面更完善
• Rollup：产物更稳定、兼容性更好，适合生产环境

Vite 在两者之间取得了最佳的平衡。

Vite 与 Vue 的关系 💎

Vite 与 Vue 的关系可以概括为：Vite 是 Vue 官方推荐的构建工具。

• Vue 3 的官方脚手架 create-vue 默认基于 Vite
• Vue 团队在 Vite 上投入了大量资源
• 两者由同一作者（尤雨溪）开发，契合度非常高

创建 Vue 项目

# 使用 Vite 创建 Vue 3 项目
npm create vue@latest

# 进入项目
cd <your-project-name>

# 安装依赖
npm install

# 启动开发服务器
npm run dev

创建 React 项目

# 使用 Vite 创建 React 项目
npm create vite@latest my-react-app -- --template react

# 进入项目
cd my-react-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

创建原生 JS 项目

# 使用 Vite 创建原生 JS 项目
npm create vite@latest my-js-app -- --template vanilla

# 进入项目
cd my-js-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

Vite 的核心特性 💎

即时热更新（HMR） 👻

Vite 的 HMR 基于原生 ESM 实现：

• 只需要让浏览器重新加载被修改的模块
• 无需重新加载整个页面
• 即使在大型项目中也能保持高速响应

// vite.config.ts
export default defineConfig({
  server: {
    hmr: {
      // 配置 HMR 主机与端口
      host: 'localhost',
      port: 5173,
    },
  },
})

依赖预构建 👻

Vite 在启动时会对 node_modules 中的依赖进行预构建：

• 将 CommonJS / UMD 模块转换为 ESM
• 将多个小文件合并成一个，减少 HTTP 请求
• 提升开发服务器的加载速度

TypeScript / JSX 开箱即用 👻

Vite 内置了对 TypeScript 和 JSX 的支持，无需额外配置：

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  // 配置项
})

CSS 预处理器 👻

Vite 原生支持 CSS、SCSS、Less、Stylus：

# 使用 SCSS
npm install -D sass

# 使用 Less
npm install -D less

// 直接在组件中引入即可使用
$primary-color: #2c3e50;

.title {
  color: $primary-color;
  font-size: 24px;
}

静态资源处理 👻

Vite 对静态资源（图片、字体、视频等）有完善的处理：

// 导入图片
import logoUrl from './assets/logo.png'

// 动态导入
const imageUrl = new URL('./assets/banner.jpg', imageUrl).href

简单的 Vite 项目结构 💎

通过 Vite 创建的项目，目录结构非常简洁：

└─ my-vite-app
   ├─  node_modules       --- 项目依赖
   ├─  public             --- 静态资源（不参与构建）
   ├─  src                --- 源码目录
   │  ├─  assets          --- 静态资源
   │  ├─  components      --- 组件
   │  ├─  App.vue         --- 根组件（Vue 项目）
   │  ├─  main.ts         --- 入口文件
   │  └─  style.css       --- 全局样式
   ├─  index.html         --- 入口 HTML
   ├─  vite.config.ts     --- Vite 配置文件
   ├─  tsconfig.json      --- TS 配置
   └─  package.json

小结

通过本章的学习，我们了解了：

1. Vite 是什么：一种新型前端构建工具，速度极快
2. 为什么需要 Vite：解决 Webpack 在大型项目中的启动慢、HMR 卡顿等问题
3. Vite 的核心原理：开发环境利用浏览器原生 ESM + esbuild，生产环境使用 Rollup 打包
4. Vite 的核心特性：HMR、依赖预构建、TS/JSX 开箱即用、CSS 预处理器支持等

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。