Vite 详解

发表于 2026-02-26 分类于前端工程化，构建工具阅读次数：

本文字数： 10k 阅读时长 ≈ 9 分钟

Vite 详解

1. 什么是 Vite？

Vite（发音为 “veet”）是由 Vue.js 创始人尤雨溪创建的前端构建工具，于 2020 年首次发布。Vite 的核心思想是利用浏览器的原生 ES 模块支持和编译工具的快速冷启动能力，为前端开发提供极速的开发体验。

Vite 的名字来源于法语单词 “vitesse”，意为 “速度”，这也体现了其设计初衷：提供更快的前端开发体验。

1.1 Vite 的诞生背景

在传统的前端构建工具（如 Webpack）中，开发服务器启动时需要打包整个应用，这导致了以下问题：

启动时间长：随着项目规模的增大，打包时间会越来越长，有时甚至需要数分钟。
热更新慢：每次修改代码后，需要重新打包相关模块，导致热更新速度变慢。
开发体验差：长时间的等待会严重影响开发效率和体验。

Vite 正是为了解决这些问题而诞生的，它通过创新的设计理念，彻底改变了前端开发的构建方式。

2. Vite 的核心功能特性

2.1 开发服务器

Vite 的开发服务器采用了创新的架构设计，具有以下特点：

极速冷启动：Vite 在开发模式下不需要打包整个应用，而是使用浏览器的原生 ES 模块支持，直接请求所需的模块。当浏览器请求一个模块时，Vite 会实时编译该模块并返回，大大减少了启动时间。
热模块替换（HMR）：Vite 的 HMR 实现非常快速，因为它只需要更新修改的模块，而不是整个应用。Vite 会跟踪模块之间的依赖关系，当一个模块发生变化时，只会更新该模块及其直接依赖的模块。
按需编译：只有当模块被请求时才会进行编译，避免了不必要的编译工作。这意味着即使项目很大，启动时间也不会显著增加。
原生 ES 模块支持：Vite 利用浏览器的原生 ES 模块支持，将开发服务器作为一个模块服务器，直接向浏览器提供 ES 模块。

2.2 构建系统

Vite 的构建系统在生产环境中使用 Rollup 进行打包，具有以下特点：

生产环境优化：在生产环境中，Vite 使用 Rollup 进行打包，利用 Rollup 的 tree-shaking 和代码分割能力，生成优化后的静态资源。Rollup 能够更有效地消除未使用的代码，生成更小的 bundle。
多页面应用支持：Vite 支持多页面应用的构建，通过配置可以生成多个 HTML 入口。这对于需要多个页面的应用非常方便。
库模式：Vite 支持构建库，生成适合发布到 npm 的库文件。在库模式下，Vite 会生成不同格式的输出（如 ESM、CommonJS、UMD 等），以满足不同的使用场景。
预构建依赖：在开发模式下，Vite 会预构建第三方依赖，将它们转换为 ES 模块格式，提高后续请求的速度。

2.3 插件系统

Vite 的插件系统设计灵活，具有以下特点：

丰富的插件生态：Vite 拥有活跃的插件生态系统，可以通过插件扩展其功能。目前已有数百个官方和社区插件，涵盖了各种功能需求。
与 Rollup 插件兼容：Vite 的插件系统设计与 Rollup 兼容，许多 Rollup 插件可以直接在 Vite 中使用。这大大扩展了 Vite 的功能范围。
插件钩子：Vite 提供了丰富的插件钩子，允许插件在构建过程的不同阶段执行自定义逻辑。

2.4 类型支持

Vite 对 TypeScript 和 JSX 提供了良好的支持：

TypeScript 集成：Vite 内置了对 TypeScript 的支持，无需额外配置。Vite 会自动处理 TypeScript 文件，并在开发模式下提供类型检查。
JSX 支持：Vite 支持 JSX 语法，适用于 React 等框架。对于 React 项目，Vite 提供了专门的插件 @vitejs/plugin-react 来优化 JSX 的处理。

2.5 其他特性

Vite 还提供了许多其他实用特性：

CSS 预处理：内置支持 CSS 预处理器，如 Sass、Less、Stylus。只需安装相应的预处理器依赖，Vite 就会自动处理。
环境变量：支持 .env 文件和环境变量的管理。Vite 会根据当前环境加载对应的 .env 文件，并将环境变量注入到代码中。
动态导入：支持动态导入语法，实现代码分割。这对于大型应用的性能优化非常重要。
模块热替换：除了 HMR 外，Vite 还支持模块热替换，允许在不刷新页面的情况下更新模块。
静态资源处理：Vite 对图片、字体、JSON 等静态资源的处理非常方便，可以直接导入使用。

3. Vite 的基本用法

3.1 初始化项目

使用 npm create vite 命令初始化一个新的 Vite 项目：

# 使用 npm
npm create vite@latest my-vite-app

# 使用 yarn
yarn create vite my-vite-app

# 使用 pnpm
pnpm create vite my-vite-app

初始化过程中，Vite 会提示选择框架（Vue、React、Svelte 等）和变体（JavaScript 或 TypeScript）。例如：

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
    React
    Preact
    Lit
    Svelte

? Select a variant: › - Use arrow-keys. Return to submit.
    JavaScript
    TypeScript

选择完成后，Vite 会生成相应的项目结构和配置文件。

3.2 项目结构

一个典型的 Vite 项目结构如下：

my-vite-app/
├── index.html          # 入口 HTML 文件
├── package.json        # 项目配置文件
├── vite.config.js      # Vite 配置文件
├── public/             # 静态资源目录（不会被处理）
└── src/                # 源代码目录
    ├── main.js         # 应用入口文件
    ├── App.vue         # 根组件（Vue 项目）
    ├── components/     # 组件目录
    ├── assets/         # 资源目录
    └── style.css       # 全局样式文件

重要文件说明：

index.html：Vite 项目的入口 HTML 文件，与传统项目不同，它位于项目根目录，而不是 public 目录。
vite.config.js：Vite 的配置文件，用于配置 Vite 的各种选项。
**public/**：存放静态资源的目录，这些资源不会被 Vite 处理，会直接复制到构建输出目录。
**src/**：存放源代码的目录，包括 JavaScript/TypeScript 文件、Vue 组件、样式文件等。

3.3 开发服务器

启动开发服务器：

# 使用 npm
npm run dev

# 使用 yarn
yarn dev

# 使用 pnpm
pnpm dev

开发服务器默认运行在 http://localhost:5173。启动后，Vite 会在终端显示开发服务器的地址和其他信息：

> vite

  VITE v5.0.0  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

3.4 构建生产版本

构建生产版本：

# 使用 npm
npm run build

# 使用 yarn
yarn build

# 使用 pnpm
pnpm build

构建结果会输出到 dist 目录。构建完成后，Vite 会显示构建结果的统计信息：

> vite build

vite v5.0.0 building for production...
done in 1.2s

✓ 3 modules transformed.
dist/index.html                 0.50 kB
dist/assets/index-123456.js     1.20 kB
dist/assets/index-123456.css    0.30 kB

3.5 预览生产版本

构建完成后，可以使用 Vite 的预览命令来预览生产版本：

# 使用 npm
npm run preview

# 使用 yarn
yarn preview

# 使用 pnpm
pnpm preview

预览服务器默认运行在 http://localhost:4173。

4. Vite 的常用操作

4.1 配置 Vite

Vite 的配置文件是 vite.config.js，可以在其中配置各种选项。以下是一些常用的配置选项：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  // 插件配置
  plugins: [vue()],
  
  // 开发服务器配置
  server: {
    port: 3000,          // 服务器端口
    open: true,          // 自动打开浏览器
    proxy: {             // 代理配置
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  
  // 构建配置
  build: {
    outDir: 'dist',      // 构建输出目录
    minify: 'terser',    // 代码压缩工具
    sourcemap: true,     // 生成 sourcemap
    rollupOptions: {     // Rollup 配置
      output: {
        manualChunks: {
          vendor: ['vue'],
          common: ['lodash']
        }
      }
    }
  },
  
  // 解析配置
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')  // 路径别名
    }
  },
  
  // CSS 配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/variables.scss";`
      }
    }
  }
})

4.2 使用插件

Vite 的插件系统非常强大，可以通过插件扩展其功能。以下是一些常用的 Vite 插件：

@vitejs/plugin-vue：Vue 官方插件，用于处理 Vue 单文件组件。
@vitejs/plugin-react：React 官方插件，用于处理 React 组件和 JSX。
@vitejs/plugin-legacy：用于生成传统浏览器兼容的代码。
vite-plugin-pwa：用于添加 PWA 支持。
vite-plugin-svg-icons：用于处理 SVG 图标。

安装并使用插件的示例：

# 安装插件
npm install @vitejs/plugin-react

# 在配置文件中使用
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

4.3 处理静态资源

Vite 对静态资源的处理非常方便，支持多种静态资源类型：

图片：可以直接导入图片文件，Vite 会自动处理。对于小图片，Vite 会将其转换为 Base64 编码，减少网络请求。
1
2
3
4
5
import logo from './assets/logo.png'

function App() {
return <img src={logo} alt="Logo" />
}
字体：可以直接导入字体文件。
1
import './assets/fonts/my-font.css'
JSON：可以直接导入 JSON 文件，Vite 会将其转换为 JavaScript 对象。
1
2
import config from './config.json'
console.log(config.apiBaseUrl)
CSS：可以直接导入 CSS 文件，Vite 会将其注入到页面中。
1
import './style.css'
4.4 环境变量

Vite 支持环境变量，通过 .env 文件定义。Vite 会根据当前环境加载对应的 .env 文件：

.env：所有环境通用的配置
.env.local：所有环境通用的本地配置（不会被 git 跟踪）
.env.development：开发环境配置
.env.production：生产环境配置

环境变量的定义：

1
2
3

# .env
VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=My App

在代码中使用环境变量：

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL
const appTitle = import.meta.env.VITE_APP_TITLE

// 内置环境变量
const isDev = import.meta.env.DEV       // 开发环境为 true
const isProd = import.meta.env.PROD     // 生产环境为 true
const baseUrl = import.meta.env.BASE_URL // 应用的基础路径

4.5 代码分割

Vite 支持动态导入实现代码分割，这对于大型应用的性能优化非常重要：

// 动态导入
async function loadComponent() {
  const module = await import('./HeavyComponent.vue')
  return module.default
}

// 在需要时加载
button.addEventListener('click', async () => {
  const HeavyComponent = await loadComponent()
  // 使用 HeavyComponent
})

Vite 还支持在路由层面进行代码分割，例如在 Vue Router 中：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

5. Vite 的工作原理

5.1 开发模式

在开发模式下，Vite 的工作原理如下：

启动开发服务器：Vite 启动一个开发服务器，监听特定端口。
处理 HTML 请求：当浏览器请求 HTML 文件时，Vite 会读取根目录下的 index.html 文件，并对其进行处理。
处理模块请求：当浏览器请求 JavaScript 模块时，Vite 会：
- 检查模块是否是第三方依赖
- 如果是第三方依赖，使用预构建的版本
- 如果是本地模块，实时编译并返回
热模块替换：当文件发生变化时，Vite 会：
- 重新编译修改的模块
- 通过 WebSocket 通知浏览器更新
- 浏览器只更新变化的模块，而不是整个应用

5.2 生产模式

在生产模式下，Vite 的工作原理如下：

预构建依赖：Vite 会预构建第三方依赖，将它们转换为 ES 模块格式。
打包应用代码：Vite 使用 Rollup 打包应用代码，进行 tree-shaking 和代码分割。
生成静态资源：Vite 会生成优化后的静态资源，包括 JavaScript、CSS、图片等。
生成 HTML 文件：Vite 会生成 HTML 文件，并注入打包后的静态资源。

6. Vite 与 Webpack 的对比分析

6.1 核心差异

特性	Vite	Webpack
开发模式	使用浏览器原生 ES 模块，按需编译	打包整个应用
冷启动速度	极快（毫秒级）	较慢（秒级，大型项目可能需要数分钟）
HMR 速度	极快（即时）	较慢（随着项目规模增大而变慢）
生产构建	使用 Rollup	使用内置打包器
配置复杂度	简单（默认配置即可满足大部分需求）	复杂（需要配置多个 loader 和 plugin）
生态系统	正在发展中（插件数量快速增长）	成熟（拥有大量插件和 loader）
适用场景	现代前端项目，对开发体验要求高	各种前端项目，特别是需要复杂构建配置的项目

6.2 性能对比

6.2.1 开发启动时间

Vite 的开发启动时间通常比 Webpack 快 10-100 倍，特别是对于大型项目。这是因为：

Vite 不需要打包整个应用，而是按需编译
Vite 利用浏览器的原生 ES 模块支持，减少了构建步骤
Vite 会预构建第三方依赖，提高后续请求的速度

6.2.2 热更新速度

Vite 的 HMR 速度几乎是即时的，而 Webpack 的 HMR 速度会随着项目规模的增大而变慢。这是因为：

Vite 只需要更新修改的模块，而不是整个应用
Vite 会跟踪模块之间的依赖关系，只更新受影响的模块
Vite 的 HMR 实现更加高效，不需要重新打包整个应用

6.2.3 生产构建速度

两者在生产构建速度上相差不大，Vite 使用 Rollup 可能会略快一些。这是因为：

Vite 使用 Rollup 进行生产构建，Rollup 的 tree-shaking 能力更强
Vite 的构建配置更加优化，默认情况下就有较好的性能

6.3 适用场景

6.3.1 Vite 适用场景

快速原型开发：Vite 的极速启动速度非常适合快速原型开发，可以立即看到修改效果。
中小型项目：对于中小型项目，Vite 可以提供更好的开发体验。
对开发体验要求高的项目：如果团队非常注重开发体验和效率，Vite 是一个很好的选择。
使用现代前端框架的项目：Vite 对 Vue、React、Svelte 等现代前端框架有很好的支持。
使用 ES 模块的项目：Vite 原生支持 ES 模块，对于使用 ES 模块的项目非常友好。

6.3.2 Webpack 适用场景

大型项目：Webpack 在处理大型项目时更加稳定，拥有更多的优化选项。
需要复杂构建配置的项目：如果项目需要复杂的构建配置，Webpack 提供了更多的灵活性。
对兼容性要求高的项目：Webpack 可以通过各种 loader 和 plugin 处理各种兼容性问题。
已有 Webpack 配置的项目：如果项目已经有了完整的 Webpack 配置，迁移到 Vite 可能需要一定的成本。
需要特殊构建功能的项目：Webpack 拥有更多的插件和 loader，可以满足各种特殊的构建需求。

6.4 迁移建议

如果您正在考虑从 Webpack 迁移到 Vite，可以按照以下步骤进行：

评估项目需求：首先评估您的项目是否适合使用 Vite，特别是是否需要 Vite 不支持的功能。
创建测试项目：在正式迁移之前，可以创建一个测试项目，尝试使用 Vite 构建您的应用，看看是否能够满足需求。
逐步迁移：可以先在小项目或新功能中尝试 Vite，积累经验后再逐步迁移整个项目。
调整配置：Vite 的配置与 Webpack 有所不同，需要进行适当调整。例如：
- Vite 使用 vite.config.js 而不是 webpack.config.js
- Vite 的插件系统与 Webpack 不同
- Vite 的路径解析规则与 Webpack 有所不同
处理依赖问题：某些依赖可能与 Vite 不兼容，需要寻找替代方案或进行适当的配置。
测试：迁移后需要进行充分的测试，确保功能正常，特别是在生产环境中。

6.5 混合使用

在某些情况下，您可能需要混合使用 Vite 和 Webpack：

开发环境使用 Vite：利用 Vite 的极速开发体验
生产环境使用 Webpack：利用 Webpack 的成熟生态和复杂配置能力

这种方式可以结合两者的优势，但需要维护两套构建配置，增加了维护成本。

7. Vite 的最佳实践

7.1 项目配置

合理使用路径别名：使用路径别名可以简化导入路径，提高代码可读性。

// vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

配置代理：在开发环境中配置代理，解决跨域问题。

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

优化构建配置：根据项目需求优化构建配置，提高构建效率和产出质量。

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          common: ['lodash', 'axios']
        }
      }
    }
  }
})

7.2 代码组织

合理使用动态导入：对于大型组件或第三方库，使用动态导入实现代码分割，提高首屏加载速度。
优化资源加载：对于图片等静态资源，合理使用导入方式，小图片使用 Base64 编码，大图片使用正常导入。
模块化组织代码：将代码按照功能模块进行组织，提高代码的可维护性。

7.3 性能优化

使用生产模式构建：在部署前，确保使用 npm run build 构建生产版本，Vite 会自动进行各种优化。
启用 gzip 压缩：在服务器端启用 gzip 压缩，减少传输体积。
使用 CDN：对于第三方库，可以考虑使用 CDN 加载，减少打包体积。
优化图片：对图片进行压缩和优化，减少图片体积。

7.4 开发技巧

使用 Vite 的 HMR：充分利用 Vite 的热模块替换功能，提高开发效率。
使用环境变量：通过环境变量管理不同环境的配置，避免硬编码。
使用插件扩展功能：根据项目需求，使用合适的 Vite 插件扩展功能。
利用 Vite 的调试工具：Vite 提供了一些调试工具，如 vite debug 命令，可以帮助排查问题。

8. 总结

Vite 是一款现代化的前端构建工具，通过利用浏览器的原生 ES 模块支持和快速的编译能力，为前端开发提供了极速的开发体验。它的核心优势在于：

极速的开发服务器启动速度：Vite 的冷启动速度通常比传统构建工具快 10-100 倍，大大提高了开发效率。
快速的热模块替换：Vite 的 HMR 速度几乎是即时的，让开发者可以立即看到修改效果。
简单易用的配置：Vite 的配置非常简单，默认配置即可满足大部分需求，减少了配置的复杂性。
与现代前端框架的良好集成：Vite 对 Vue、React、Svelte 等现代前端框架有很好的支持，提供了专门的插件。
强大的构建能力：在生产环境中，Vite 使用 Rollup 进行打包，生成优化后的静态资源。

虽然 Vite 的生态系统还在发展中，但它已经成为许多前端开发者的首选构建工具，特别是对于使用现代前端框架的项目。随着 Vite 的不断发展和完善，它有望成为前端构建工具的主流选择。

与 Webpack 相比，Vite 在开发体验上有明显的优势，但 Webpack 在某些复杂场景下仍然具有不可替代的地位。开发者可以根据项目的具体需求选择合适的构建工具，或者在不同的场景下使用不同的工具。

无论选择哪种构建工具，最重要的是它能够满足项目的需求，提高开发效率，保证应用的性能和质量。

Vite 详解

1. 什么是 Vite？

1.1 Vite 的诞生背景

2. Vite 的核心功能特性

2.1 开发服务器

2.2 构建系统

2.3 插件系统

2.4 类型支持

2.5 其他特性

3. Vite 的基本用法

3.1 初始化项目

3.2 项目结构

3.3 开发服务器

3.4 构建生产版本

3.5 预览生产版本

4. Vite 的常用操作

4.1 配置 Vite

4.2 使用插件

4.3 处理静态资源

4.4 环境变量

4.5 代码分割

5. Vite 的工作原理

5.1 开发模式

5.2 生产模式

6. Vite 与 Webpack 的对比分析

6.1 核心差异

6.2 性能对比

6.2.1 开发启动时间

6.2.2 热更新速度

6.2.3 生产构建速度

6.3 适用场景

6.3.1 Vite 适用场景

6.3.2 Webpack 适用场景

6.4 迁移建议

6.5 混合使用

7. Vite 的最佳实践

7.1 项目配置

7.2 代码组织

7.3 性能优化

7.4 开发技巧

8. 总结

9. 参考资料