Vite

下一代前端构建工具——基于原生 ESM 的开发服务器与基于 Rolldown（Rust）的生产构建，提供闪电般的开发体验和极致的构建性能。

精选工具ESMRustRolldown构建工具

Vite 是最具影响力的前端构建工具，利用浏览器原生 ESM 实现毫秒级开发启动，Vite 8 全面切换为 Rolldown Rust 打包器，生产构建提速 10-30 倍，GitHub 81.8k Star。

Vite

下一代前端构建工具——基于原生 ESM 的开发服务器与基于 Rolldown（Rust）的生产构建，提供闪电般的开发体验和极致的构建性能。

技术简介说明

Vite（法语意为"快速的"，发音类似 /vit/ "veet"）是由 Evan You（Vue.js 作者）于 2020 年创建的前端构建工具，旨在解决传统打包工具（如 Webpack）在大型项目中开发服务器启动缓慢、HMR 更新延迟的核心痛点。Vite 的核心创新在于利用浏览器原生 ES Module 支持，在开发阶段跳过打包步骤，直接按需编译和提供模块，从而实现毫秒级的服务器启动和热更新。这一架构突破使得开发体验与项目规模脱钩——无论项目包含数百还是数万个模块，启动时间始终维持在毫秒级别。

随着版本的持续演进，Vite 已从最初的"开发服务器 + Rollup 构建"双引擎架构，发展到 Vite 6（2024年12月）引入实验性 Environment API，Vite 7（2025年6月）首次集成 Rolldown，并在 Vite 8（2026年3月）全面切换为以 Rolldown 作为统一 Rust 打包器。这一转变彻底替代了此前 esbuild（开发预构建）+ Rollup（生产构建）的混合架构，实现了开发和生产构建引擎的统一。Vite 8 的生产构建速度较此前架构提升了 10-30 倍，同时保持了与现有 Rollup 插件生态的兼容性。

截至 2026 年 7 月，Vite 在 GitHub 上拥有 81.8k Star，被近 1000 万个代码仓库使用，npm 周下载量达数百万级，是前端生态中最具影响力的构建工具之一。Vite 已成为 React、Vue、Svelte、SolidJS、Astro、Nuxt 等主流前端框架的默认构建工具，被 OpenAI、Shopify、Stripe、Linear、Cloudflare、Mercedes-Benz.io 等知名企业广泛采用。其背后的 VoidZero Inc. 公司致力于构建开源的前端工具链（包括 Vitest、Rolldown 等），确保 Vite 的长期可持续发展。Cloudflare 也作为重要赞助方支持 Vite 的使命。

基本信息

官网：https://vite.dev/
GitHub：https://github.com/vitejs/vite
License：MIT
最新版本：v8.1.3（2026年7月2日）
主要维护者：VoidZero Inc. 及 Vite 社区贡献者（原由 Evan You 创建，现由核心团队维护）
主语言：TypeScript（82.6%）+ Rust（Rolldown 核心）
Node.js 要求：Node.js 20.19+ 或 22.12+
npm 周下载量：数百万级（前端构建工具中最高之一）
GitHub Stars：81.8k
代码仓库使用量：9.9M+（近 1000 万）
累计发布版本：703+

快速上手

安装

使用你偏好的包管理器创建 Vite 项目：

# npm
npm create vite@latest my-app
 
# yarn
yarn create vite my-app
 
# pnpm（推荐）
pnpm create vite my-app
 
# bun
bun create vite my-app
 
# deno
deno init --npm vite my-app

在交互提示中选择：

项目名称（默认当前目录名）
框架模板：Vanilla、Vue、React、Svelte、Solid、Qwik、Nuxt 等
变体：JavaScript / TypeScript

进入项目目录并安装依赖：

cd my-app
pnpm install

启动开发服务器：

pnpm dev

默认在 http://localhost:5173 启动，终端会显示访问地址和启动耗时（通常 < 500ms）。

基础配置

Vite 的配置文件为项目根目录下的 vite.config.ts：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
export default defineConfig({
  // 插件配置
  plugins: [react()],
 
  // 开发服务器配置
  server: {
    port: 3000,
    open: true,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
 
  // 路径别名
  resolve: {
    alias: {
      '@': '/src',
    },
    // Vite 8+ 原生支持 tsconfig paths
    // tsconfigPaths: true,
  },
 
  // 构建配置
  build: {
    target: 'es2022',
    outDir: 'dist',
    sourcemap: true,
    minify: 'lightningcss',  // Vite 8 默认使用 lightningcss
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
 
  // 开发工具
  devtools: true,  // Vite 8+ 内置 Devtools 支持
 
  // CSS 配置
  css: {
    modules: {
      localsConvention: 'camelCase',
    },
  },
})

最小示例

一个最简单的 Vite 项目结构：

my-app/
├── index.html          # 入口 HTML（Vite 以此为起点）
├── src/
│   ├── main.ts         # 应用入口
│   ├── App.tsx         # 根组件（React 示例）
│   └── style.css       # 全局样式
├── public/             # 静态资源目录（原样复制到 dist）
├── vite.config.ts      # Vite 配置
├── tsconfig.json       # TypeScript 配置
└── package.json

index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <!-- Vite 使用 index.html 作为入口，通过 type="module" 加载 JS -->
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

src/main.ts：

import './style.css'
 
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <h1>Hello Vite!</h1>
  <p>当前时间：${new Date().toLocaleString()}</p>
`

src/style.css：

:root {
  font-family: system-ui, sans-serif;
  color: #1a1a1a;
}
 
h1 {
  color: #646cff;
}

运行 pnpm dev 即可在浏览器中即时看到效果，无需任何打包步骤。Vite 利用浏览器原生 ESM 按需加载模块，首次请求仅编译实际使用的文件。

核心概念与架构

原生 ESM 开发服务器

Vite 开发服务器的核心原理是利用浏览器对原生 ES Module 的支持。在开发阶段，Vite 不打包代码，而是将源码作为 ESM 模块直接提供给浏览器。浏览器按需请求各模块——当 HTML 中的 <script type="module"> 加载后，浏览器会递归解析并请求所有 import 的模块。Vite 服务器仅在请求到达时才编译对应文件，这种"按需编译"策略使得启动时间与项目规模无关。

与 Webpack 等工具"先打包再提供"的模式不同，Vite 的开发模式避免了全量打包的开销。这意味着：

冷启动：毫秒级，与项目大小无关
HMR：仅重新编译变更的模块，不受总模块数影响
按需编译：只编译浏览器实际请求的文件

依赖预构建（Dependency Pre-Bundling）

node_modules 中的第三方依赖通常不是 ESM 格式（CommonJS、UMD 等），且可能包含大量小文件。Vite 使用 Rolldown（Vite 8+，此前为 esbuild）在启动时将 CommonJS / UMD 依赖预构建为 ESM 格式，将相关模块合并到单个文件中以减少 HTTP 请求数。

预构建的关键特性：

结果缓存到 node_modules/.vite 目录
基于文件系统时间戳、包管理器锁文件和配置变更智能判断是否需要重新构建
自动检测深层导入（deep imports）并纳入预构建
支持通过 optimizeDeps.include / exclude 手动控制

Rolldown 统一构建引擎

自 Vite 8 起，Rolldown（基于 Rust 实现的打包器）取代了此前的 esbuild（开发预构建）+ Rollup（生产构建）双引擎架构，成为统一的构建引擎。Rolldown 由 Vite 团队开发，设计目标是提供与 Rollup 兼容的 API 同时具备 Rust 级别的构建性能。

这一架构转变带来了：

统一的心智模型：开发和生产使用同一个打包引擎，行为一致性更好
模块级持久化缓存：跨构建缓存已处理的模块，大幅加速增量构建
Module Federation 支持：原生支持模块联邦能力
兼容 Rollup 插件：现有 Rollup 插件大部分可直接使用

插件系统

Vite 在 Rollup 插件接口基础上进行了扩展，提供了一套强大的插件 API。Vite 插件分为两类：

框架插件：如 @vitejs/plugin-react、@vitejs/plugin-vue，通过 plugins 选项配置
社区插件：如 vite-plugin-pwa、vite-plugin-inspect，通过 npm 安装

Vite 插件可以：

转换源码（如 JSX、TypeScript、Markdown）
处理静态资源（图片、字体、SVG）
提供虚拟模块（Virtual Modules，如 virtual:module）
自定义 HMR 行为
控制开发服务器中间件
修改 HTML 入口

// 自定义插件示例：将 Markdown 文件作为模块导入
import type { Plugin } from 'vite'
 
export function markdownPlugin(): Plugin {
  return {
    name: 'vite-plugin-markdown',
    enforce: 'pre',  // 确保在其他插件之前执行
    transform(code, id) {
      if (id.endsWith('.md')) {
        // 将 Markdown 内容转为字符串导出
        return `export default ${JSON.stringify(code)}`
      }
    },
    // 开发服务器钩子
    configureServer(server) {
      // 添加自定义中间件
      server.middlewares.use((req, res, next) => {
        console.log(`请求: ${req.url}`)
        next()
      })
    },
  }
}

HMR（热模块替换）

Vite 通过 WebSocket 连接实现精确的模块级热更新。当文件修改时，Vite 仅重新编译变更的模块，并通过 HMR 协议通知浏览器仅替换受影响的模块及其依赖链，无需刷新页面。

HMR 的工作流程：

文件保存 → Vite 检测到变更
Vite 确定受影响的模块边界（仅变更模块及其导入者）
通过 WebSocket 推送 HMR 更新到浏览器
浏览器执行旧模块的 dispose 回调，加载新模块
新模块执行 accept 回调，完成热替换

框架集成（如 Vue SFC、React Fast Refresh）在此基础上提供了组件级别的热更新，保持组件状态不丢失。

核心特性

1. 极速冷启动

基于原生 ESM 的按需编译策略，开发服务器启动速度与项目规模无关。在典型项目中，启动时间通常在 200-500ms 之间。即使项目包含数万个模块，启动时间也不会显著增加（区别于 Webpack 的线性增长）。

2. 即时模块热替换（HMR）

精确的模块级热更新，仅替换变更模块及其依赖。编辑保存后立即在浏览器中反映变更，通常在 50ms 内完成。Vue SFC 和 React Fast Refresh 提供了框架级别的组件热更新，保持状态不丢失。

3. 基于 ESM 的按需编译

只在浏览器请求模块时才进行编译，避免不必要的计算。配合 Rolldown 的持久化缓存，重复构建速度极快。

4. 丰富的插件生态

兼容 Rollup 插件 API，社区提供了数千个 Vite 插件，覆盖 PWA、SVG、Markdown、国际化、分析等几乎所有前端场景。官方插件注册中心（Plugin Registry）提供了经过验证的高质量插件。

5. 开箱即用的 TypeScript / JSX / CSS 支持

内置对 TypeScript、JSX/TSX、CSS Modules、Sass/SCSS、Less、Stylus、PostCSS、Web Workers、WebAssembly 等的一流支持，无需额外安装和配置。TypeScript 通过 esbuild（开发）和 Rolldown（生产）实现快速转换。

6. CSS 代码分割

Vite 自动将异步 chunk 中使用的 CSS 提取为独立文件，通过 <link> 标签按需加载，避免 CSS 阻塞渲染。支持 CSS Modules、CSS @import 解析、URL 重写等。

7. SSR 原生支持

内置 SSR 开发服务器和 API，支持：

import.meta.env.SSR 条件判断
外部化依赖（ssr.external）
.wasm?init 导入
SSR 构建与客户端构建分离

为 Nuxt、Vitest、SvelteKit、SolidStart 等框架提供底层支撑。

8. Library 模式

通过 build.lib 配置将源码打包为库格式，支持 ESM 和 CJS 双格式发布。配合 vite-plugin-dts 可自动生成 TypeScript 类型声明文件。

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyLibrary',
      formats: ['es', 'cjs', 'umd'],
      fileName: (format) => `my-library.${format}.js`,
    },
    rollupOptions: {
      external: ['vue', 'react'],  // 不打包外部依赖
    },
  },
})

9. 环境变量管理

基于 dotenv 的环境变量系统，支持多环境文件：

.env — 所有模式加载
.env.local — 所有模式加载，git 忽略
.env.development / .env.production / .env.staging — 特定模式加载

通过 import.meta.env.VITE_* 访问，只有 VITE_ 前缀的变量会暴露给客户端代码。

10. 内置 Devtools（Vite 8+）

Vite 8 引入 devtools 配置选项，直接从开发服务器启用 Vite Devtools，提供模块依赖图、构建分析、性能追踪、HMR 调试等能力，无需安装浏览器扩展。

生态图

框架集成

框架	集成方式	说明
Vue	`create-vue` / `@vitejs/plugin-vue`	Vite 的诞生土壤，深度集成，支持 SFC HMR
React	`@vitejs/plugin-react`	使用 Oxc 替代 Babel（Vite 8），支持 Fast Refresh
Svelte	`@sveltejs/vite-plugin-svelte`	SvelteKit 底层构建工具
SolidJS	`vite-plugin-solid`	官方推荐构建工具
Preact	`@preact/preset-vite`	官方预设
Qwik	`@builder.io/qwik`	内置 Vite 集成
Astro	内置	静态站点的默认构建引擎
Nuxt 3	内置	基于 Vite 的 Vue 全栈框架
SvelteKit	内置	基于 Vite 的 Svelte 全栈框架
SolidStart	内置	基于 Vite 的 Solid 全栈框架

官方插件与工具

create-vite：项目脚手架工具，提供多框架模板（Vanilla/Vue/React/Svelte/Solid/Qwik）
@vitejs/plugin-vue：Vue 3 SFC 支持，包含 <script setup> 编译
@vitejs/plugin-react：React Fast Refresh + JSX 转换（Vite 8 使用 Oxc）
@vitejs/plugin-legacy：生产环境旧浏览器兼容（生成 legacy chunk + polyfill）
@vitejs/plugin-cc：Web Components 支持

社区插件生态（精选）

插件	功能
vite-plugin-pwa	PWA 支持（Service Worker、离线缓存、Web App Manifest）
vite-plugin-inspect	检查插件中间状态，调试利器
vite-plugin-pages	基于文件系统的路由
vite-plugin-components	自动按需导入组件
vite-plugin-html	HTML 模板引擎支持（EJS、Handlebars）
vite-plugin-svg-icons	SVG 雪碧图管理
vite-plugin-compression	构建产物 Gzip/Brotli 压缩
vite-plugin-imagemin	图片压缩优化
vite-plugin-md	Markdown 作为组件/模块使用
unplugin-auto-import	自动导入 API（Vue/React 等），支持类型提示
vite-plugin-dts	自动生成 TypeScript 类型声明文件
rollup-plugin-visualizer	构建产物可视化分析

适用场景

1. 现代 SPA 应用开发

Vite 是单页应用的最佳构建选择。即时启动和闪电 HMR 让开发体验极为流畅，Rolldown 构建确保生产产物最优。配合 Vue Router 或 React Router 可快速构建复杂 SPA。

2. 多页面应用（MPA）

Vite 原生支持多入口配置，每个页面拥有独立的 HTML 入口和 JS 模块图。适合传统多页面架构、后台管理系统等场景。

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        index: './src/pages/index/main.ts',
        about: './src/pages/about/main.ts',
        dashboard: './src/pages/dashboard/main.ts',
      },
    },
  },
})

3. 组件库 / SDK 开发

Vite 的 Library Mode 支持将源码打包为 ESM、CJS 和 UMD 格式发布，配合 vite-plugin-dts 自动生成类型声明文件。支持外部化依赖、CSS 提取、资源内联等。

4. 微前端子应用

Vite 8 原生支持 Module Federation，配合 @module-federation/vite 插件可以实现微前端架构。子应用可以独立开发、独立部署，通过模块联邦共享依赖。

5. 静态站点生成（SSG）

配合 Astro、VitePress、Nuxt 等框架，Vite 是静态站点生成的理想底层工具，支持 SSG + SSR 混合渲染模式。VitePress 本身就是基于 Vite 构建的。

6. SSR 应用

Vite 8 的 SSR 原生支持使其成为全栈框架的首选。Nuxt 3、SvelteKit、SolidStart 等均以 Vite 为构建引擎，提供开箱即用的 SSR 开发体验。

7. Web Components 开发

Vite 原生支持 Web Components 开发，无需框架依赖，适合构建轻量级可复用组件。@vitejs/plugin-cc 提供了额外的编译时优化。

开发与工程化

开发流程

# 启动开发服务器
pnpm dev
 
# 启动开发服务器并指定端口/主机
pnpm dev --port 8080 --host
 
# 以 HTTPS 模式启动
pnpm dev --https
 
# 预览生产构建产物（本地测试）
pnpm preview
 
# 类型检查（配合 vue-tsc 或 tsc）
pnpm typecheck

环境变量配置

# .env                — 所有模式加载
# .env.local          — 所有模式加载，git 忽略
# .env.development    — 开发模式加载（pnpm dev）
# .env.production     — 生产模式加载（pnpm build）
# .env.staging        — 自定义模式加载（pnpm build --mode staging）

// 在代码中访问
const apiUrl = import.meta.env.VITE_API_URL      // 自定义变量
const baseUrl = import.meta.env.BASE_URL          // 应用 base 路径
const isDev = import.meta.env.DEV                 // 开发模式 true
const isProd = import.meta.env.PROD               // 生产模式 true
const ssr = import.meta.env.SSR                   // SSR 模式 true
const mode = import.meta.env.MODE                  // 当前模式名称
 
// TypeScript 类型声明（env.d.ts）
/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_APP_VERSION: string
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}

构建优化

export default defineConfig({
  build: {
    // 构建目标
    target: 'es2022',
    cssTarget: 'chrome88',
 
    // 输出配置
    outDir: 'dist',
    assetsDir: 'assets',
 
    // Source Map
    sourcemap: true,
 
    // CSS 压缩
    cssMinify: 'lightningcss',
 
    // Chunk 分割
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('react')) return 'vendor-react'
            if (id.includes('lodash')) return 'vendor-utils'
            if (id.includes('@mui')) return 'vendor-ui'
            return 'vendor-other'
          }
        },
      },
    },
 
    // 模块预加载
    modulePreload: {
      polyfill: true,
    },
 
    // 生成 manifest
    manifest: true,
  },
})

CI/CD 集成

# GitHub Actions 示例
name: Build and Deploy
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - uses: pnpm/action-setup@v4
        with:
          version: 9
 
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'pnpm'
 
      - run: pnpm install --frozen-lockfile
 
      # 验证：类型检查 + Lint + 测试 + 构建
      - run: pnpm verify
 
      # 单独构建（如需自定义）
      - run: pnpm build
 
      # 上传构建产物
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist/

Docker 部署

# 多阶段构建
FROM node:22-alpine AS builder
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile
COPY . .
RUN pnpm build
 
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# nginx.conf
server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;
 
    # SPA 路由
    location / {
        try_files $uri $uri/ /index.html;
    }
 
    # 静态资源缓存
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
 
    # 安全头
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";
    add_header Referrer-Policy "strict-origin-when-cross-origin";
}

性能与安全

性能特点与优化

依赖预构建优化

Vite 自动对 node_modules 中的依赖进行预构建和缓存。大型依赖的预构建可能耗时较长，可通过显式配置优化：

export default defineConfig({
  optimizeDeps: {
    include: ['lodash', 'moment', 'axios'],  // 强制预构建指定依赖
    exclude: ['@heavy/package'],              // 排除不需要预构建的依赖
    esbuildOptions: {
      target: 'es2022',
    },
  },
})

代码分割策略

合理的代码分割可以减少首屏加载时间：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // 按依赖分组
            if (id.includes('react') || id.includes('react-dom')) return 'vendor-react'
            if (id.includes('lodash') || id.includes('dayjs')) return 'vendor-utils'
            return 'vendor-other'
          }
          // 按功能模块分组
          if (id.includes('/src/components/')) return 'components'
          if (id.includes('/src/utils/')) return 'utils'
        },
      },
    },
  },
})

Tree Shaking

Vite 基于 ESM 的静态分析实现 Tree Shaking，自动移除未使用的代码。确保：

使用 ESM 导出（export）而非 CJS（module.exports）
避免副作用（side effects），或在 package.json 中声明 "sideEffects": false
使用具名导入而非默认导入

CSS 优化

Vite 8 默认使用 Lightning CSS 进行 CSS 压缩，比传统工具快数倍
自动提取异步 chunk 的 CSS 为独立文件
CSS Modules 支持作用域隔离
支持 PostCSS 配置

持久化缓存（Vite 8+）

Vite 8 基于 Rolldown 提供模块级持久化缓存，跨构建复用已处理的模块结果：

export default defineConfig({
  cacheDir: 'node_modules/.vite-cache',  // 自定义缓存位置
})

实验性 Bundled Dev Mode（Vite 8.1）

对于超大型项目（万级模块），启用实验性打包开发模式可显著提升性能：

启动速度提升约 15 倍
全页面重载提升约 10 倍
冷启动渲染提升约 3 倍

export default defineConfig({
  experimental: {
    bundledDev: true,
  },
})

安全注意事项

环境变量隔离：只有 VITE_ 前缀的环境变量会暴露给客户端代码，敏感信息（数据库密钥、API Secret）不要使用 VITE_ 前缀
CSP 策略：生产部署时配置合适的 Content-Security-Policy 头
依赖审计：定期运行 pnpm audit 检查依赖漏洞
SRI 校验：对 CDN 资源使用 Subresource Integrity 确保完整性
Dev Server 暴露：开发服务器默认仅监听 localhost，生产环境不要暴露开发服务器
CORS 配置：开发服务器代理配置注意 changeOrigin 和 secure 选项
HTML 注入：避免在 index.html 中直接拼接用户输入

技术对比

与主流构建工具对比

特性	Vite 8	Webpack 5	Turbopack	Parcel 2	esbuild	Rspack
开发服务器启动	毫秒级（ESM 按需）	秒-分钟级（全量打包）	毫秒级（Rust）	秒级	毫秒级	~1.4s（Rust）
HMR 速度	~100-200ms	随项目增大变慢	~70ms（最优）	秒级	N/A	~160ms
生产构建速度	极快（Rolldown/Rust）	较慢（JavaScript）	快（Rust）	中等	极快	~3.35s（Rust）
Bundle 大小	最小	中等	中等	中等	较小	中等
配置复杂度	低（约定优于配置）	高（高度可配置）	低（Next.js 集成）	极低（零配置）	低	中（兼容 Webpack）
插件生态	丰富（兼容 Rollup）	最丰富	发展中	有限	有限	兼容 Webpack
框架集成	一流（Vue/React/Svelte/Solid）	广泛但需手动配置	Next.js 专属	框架无关	框架无关	框架无关
SSR 支持	原生内置	需手动配置	Next.js 内置	有限	N/A	需手动配置
学习曲线	低	高	低（Next.js）	极低	低	中
大型项目表现	优秀（Bundled Dev Mode）	差（需大量优化）	优秀	一般	优秀	优秀
Webpack 兼容性	不兼容	原生	不兼容	不兼容	不兼容	~98% 兼容

性能基准数据（2026 年，800 组件 React 应用）

指标	Vite 8	Rspack	Turbopack	Webpack 5
冷启动	~1.5-2s	~1.4s	~1.5-2s	~30-60s
HMR	~100-200ms	~160ms	~70ms	~500ms-2s
生产构建	极快（Rolldown）	~3.35s	快	慢

数据来源：kunalganglani.com、techsy.io、PkgPulse 2026 年基准测试

选型建议

场景	推荐工具	理由
新项目（Vue/React/Svelte）	Vite 8	最佳 DX，框架集成一流
遗留 Webpack 项目迁移	Rspack	~98% Webpack 兼容，迁移成本最低
Next.js 项目	Turbopack	Vercel 深度集成，增量编译
零配置快速原型	Parcel 2	零配置，自动检测
极致构建速度	Rspack / esbuild	Rust 核心，冷启动最快
框架无关库开发	Vite 8	Library Mode + 插件生态

最佳实践

生产环境配置优化

1. 构建产物分析

# 安装分析工具
pnpm add -D rollup-plugin-visualizer

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'
 
export default defineConfig({
  plugins: [
    visualizer({
      filename: 'dist/stats.html',
      gzipSize: true,
      brotliSize: true,
      open: true,  // 构建后自动打开
    }),
  ],
})

2. 合理配置构建目标

export default defineConfig({
  build: {
    target: 'es2022',       // 现代浏览器使用更高 target 减少 polyfill
    cssTarget: 'chrome88',  // CSS 特性目标
  },
})

3. 使用 Legacy 插件兼容旧浏览器

import legacy from '@vitejs/plugin-legacy'
 
export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
  ],
})

4. 预加载关键资源

export default defineConfig({
  build: {
    modulePreload: {
      polyfill: true,
    },
    manifest: true,  // 生成 manifest.json
  },
})

5. CDN 部署配置

export default defineConfig({
  base: '/assets/',  // 或使用环境变量 import.meta.env.VITE_BASE_URL
  build: {
    assetsDir: 'static',
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name]-[hash][extname]',
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
      },
    },
  },
})

代码分割策略

Vendor Chunk：将第三方库（react、vue 等）提取为独立 chunk，利用浏览器缓存
Route-based Splitting：按路由懒加载组件，减少首屏体积
Component-based Splitting：大型组件（图表、编辑器）按需加载
Dynamic Import：使用 import() 语法实现代码分割

静态资源处理

小资源内联：默认 < 4KB 的资源内联为 base64（可配置 assetsInlineLimit）
哈希文件名：生产构建自动添加内容哈希，支持长期缓存
Public 目录：public/ 目录中的文件原样复制到 dist/，适合 favicon、robots.txt 等
资源导入：JS/CSS 中的资源导入会被 Vite 处理，自动添加哈希和路径前缀

常见陷阱与解决方案

1. `dirname` / `filename` 不可用

Vite 配置文件使用 ESM，Node.js 的 __dirname 和 __filename 在 ESM 中不可用：

// 错误
import path from 'path'
console.log(__dirname)  // ReferenceError
 
// 正确
import { fileURLToPath } from 'url'
import { dirname } from 'path'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

2. CommonJS 依赖问题

某些纯 CommonJS 包可能无法正确处理：

export default defineConfig({
  optimizeDeps: {
    include: ['problematic-cjs-package'],
  },
})

3. 环境变量类型

Vite 环境变量均为字符串，需要手动转换：

// 注意：import.meta.env.VITE_COUNT 是字符串 "100"，不是数字 100
const count = Number(import.meta.env.VITE_COUNT)
const isEnabled = import.meta.env.VITE_ENABLED === 'true'

4. CSS @import 路径

CSS 中的 @import 需要使用别名或相对路径：

/* 正确 */
@import './variables.css';
@import '@/styles/mixins.css';
 
/* 错误 — 不会被 Vite 解析 */
@import 'src/styles/variables.css';

5. Monorepo 中的依赖解析

在 Monorepo 中，Vite 可能无法正确解析 workspace 依赖：

export default defineConfig({
  resolve: {
    alias: {
      '@shared': '/packages/shared/src',
    },
  },
  optimizeDeps: {
    include: ['@shared/**'],
  },
})

技术局限与边界

已知限制

浏览器兼容性：开发模式依赖原生 ESM，需要支持 <script type="module"> 的浏览器（Chrome 61+、Firefox 60+、Safari 11+、Edge 16+）。IE11 完全不支持。旧版浏览器需要使用 @vitejs/plugin-legacy 插件生成兼容代码
CommonJS 兼容性问题：虽然依赖预构建解决了大多数 CJS 依赖的问题，但某些边缘情况下（动态 require、条件导出、__dirname 依赖）可能无法完美转换
Webpack Loader 生态：Vite 使用 Rollup/Rolldown 插件体系，Webpack 的 Loader 不能直接使用。部分功能需要寻找替代插件或自行编写转换
Node.js 版本要求：Vite 8 要求 Node.js 20.19+ 或 22.12+，不支持更低版本
CSS 预处理器兼容性：Vite 8 默认使用 Lightning CSS 替代传统 CSS 处理，某些 PostCSS 插件可能需要适配。Sass 默认使用 Modern API
安装体积：Vite 8 的安装体积增加了约 15 MB（Rolldown ~5 MB + Lightning CSS ~10 MB）
实验性功能：Bundled Dev Mode（8.1）和 Chunk Import Map 仍为实验性功能，第三方插件可能不兼容
开发/生产环境差异：开发模式使用 ESM 按需加载，生产模式使用 Rolldown 打包，两者行为可能存在细微差异（如环境变量注入时机、CSS 处理方式）

不适用场景

IE11 支持：Vite 原生不支持 IE11，需要 @vitejs/plugin-legacy 但仍有局限
极度定制化的构建流程：如果项目需要深度定制打包管线（如自定义模块解析图、复杂的多阶段构建），Webpack 的灵活性可能更适合
遗留 Webpack 生态：如果项目重度依赖 Webpack 特有的 Loader（如 thread-loader、cache-loader），迁移成本可能较高
Electron / Tauri 桌面应用：虽然有 vite-plugin-electron 等方案，但 electron-builder + Webpack 仍是更成熟的选择
纯 Node.js 后端：Vite 专注于前端，Node.js 后端构建更适合使用 tsup、tsx 等工具
Next.js 项目：Next.js 深度集成 Turbopack，使用 Vite 会失去很多 Next.js 特性

权衡取舍

选择 Vite	选择其他工具
追求极致开发体验	需要 Webpack 级配置灵活性
使用 Vue/React/Svelte/Solid 等主流框架	使用 Next.js（Turbopack 更自然）
新项目或可重构的老项目	无法修改构建流程的遗留项目
团队接受 Rust 工具链	需要纯 JavaScript 工具链
重视构建速度和 DX	已有完善的 Webpack 生态且无需迁移
需要丰富的插件生态	需要 Webpack Loader 兼容

学习资源

官方资源

Vite 官方文档 — 最权威的参考，包含指南、配置 API 和插件开发文档
Vite 博客 — 版本发布公告和技术深度文章
Vite GitHub — 源代码、Issue 追踪和贡献指南
Vite 插件 API 文档 — 插件开发完整参考
配置参考 — 所有配置选项的详细说明
Vite 中文文档 — 官方中文翻译文档

社区资源

Awesome Vite — 社区精选 Vite 资源、插件和模板列表
ViteConf — 年度 Vite 社区大会，包含技术演讲和最新动态
Vite Discord — 官方 Discord 社区，实时交流
Vite Plugin Registry — 官方插件注册中心
Vite on GitHub Discussions — 技术讨论和 Q&A

教程与视频

Vite 官方入门指南 — 从零开始学习 Vite
Vite Masterclass — YouTube 上的深入学习资源
Vite 30 天入门 — Vite 使用技巧和最佳实践
State of Vue & Vite 2026 — 2026 年 Vite 现状回顾

社交媒体

Vite on Bluesky — 官方 Bluesky 账号
Vite on Mastodon — 官方 Mastodon 账号
Vite on X — 官方 X（Twitter）账号

2026 年现状

版本	发布时间	里程碑意义
Vite 5.0	2023年11月	依赖预构建升级到 esbuild 0.18，改进的 CSS 处理
Vite 6.0	2024年12月	实验性 Environment API、稳定 Bun 支持、Lightning CSS 默认 CSS 压缩
Vite 7.0	2025年6月24日	首次集成 Rolldown；移除废弃特性；改进浏览器目标
`rolldown-vite`	2025年下半年	Vite 7 + Rolldown 的过渡包，渐进迁移路径
Vite 8.0 beta	2025年12月3日	Rolldown 作为默认打包器的首个 beta
Vite 8.0	2026年3月12日	Rolldown 成为统一 Rust 打包器；10-30x 构建提速；内置 Devtools
Vite 8.1	2026年6月	实验性 Bundled Dev Mode；Chunk Import Map；Wasm ESM 导入
Vite 8.1.3	2026年7月2日	最新稳定补丁版本

Vite 8+ 新特性

Rolldown 统一引擎：彻底替代 esbuild + Rollup，Rust 驱动的构建管线，生产构建速度提升 10-30 倍
内置 Devtools：devtools: true 即可启用，提供模块图、构建分析、性能追踪
原生 tsconfig paths 支持：resolve.tsconfigPaths: true，无需额外插件
Lightning CSS 默认化：CSS 压缩和 CSS Modules 默认使用 Lightning CSS
Oxc 集成：React 插件使用 Oxc 替代 Babel 进行 JSX 转换
Module Federation：原生支持模块联邦
实验性 Bundled Dev Mode（8.1）：超大型项目开发模式性能提升 15 倍
Wasm ESM 导入：支持 import wasm from './module.wasm?esm'
Chunk Import Map：实验性的 Import Map 支持

Rolldown 进展

Rolldown 是 Vite 团队开发的 Rust 打包器，目标是提供与 Rollup 兼容的 API 同时具备 Rust 级别的性能。截至 2026 年 7 月：

Rolldown 已作为 Vite 8 的默认打包器
兼容大部分 Rollup 插件 API
提供模块级持久化缓存
性能较 Rollup 提升 10-30 倍
独立于 Vite 使用（rolldown npm 包）

社区活跃度

GitHub Stars：81.8k，持续增长
代码仓库使用量：9.9M+（近 1000 万）
累计发布：703+ 版本
补丁发布频率：每周
次要版本发布：根据新特性准备情况发布，无固定周期
社区活动：ViteConf 年度大会持续举办（2025年 ViteConf Evan You 演讲 "Vite Beyond a Build Tool"）
赞助与支持：Cloudflare 赞助，VoidZero Inc. 主导开发
企业采用：OpenAI、Shopify、Stripe、Linear、Mercedes-Benz.io 等（Linear 报告构建时间从 46 秒降至 6 秒）

未来路线图

根据 Vite 团队公开信息和社区讨论，未来发展方向包括：

Bundled Dev Mode 稳定化：8.1 的实验性特性将在后续版本中稳定并成为默认选项
Lightning CSS 全面默认化：进一步将 Lightning CSS 设为默认的 CSS 处理工具
Rolldown 持续优化：作为 Rust 打包器，Rolldown 将持续提升性能和兼容性
Module Federation 增强：微前端架构的原生支持将进一步增强
Environment API 深化：Vite 6 引入的环境 API 将进一步完善，支持更复杂的构建环境配置
开发者工具增强：Vite Devtools 将提供更多调试、分析和优化能力
Web 标准推进：继续推动 Import Maps、Wasm ESM 等 Web 标准的落地

参考资料：

Vite

Vite

技术简介说明

基本信息

快速上手

安装

基础配置

最小示例

核心概念与架构

原生 ESM 开发服务器

依赖预构建（Dependency Pre-Bundling）

Rolldown 统一构建引擎

插件系统

HMR（热模块替换）

核心特性

1. 极速冷启动

2. 即时模块热替换（HMR）

3. 基于 ESM 的按需编译

4. 丰富的插件生态

5. 开箱即用的 TypeScript / JSX / CSS 支持

6. CSS 代码分割

7. SSR 原生支持

8. Library 模式

9. 环境变量管理

10. 内置 Devtools（Vite 8+）

生态图

框架集成

官方插件与工具

社区插件生态（精选）

相关生态项目

适用场景

1. 现代 SPA 应用开发

2. 多页面应用（MPA）

3. 组件库 / SDK 开发

4. 微前端子应用

5. 静态站点生成（SSG）

6. SSR 应用

7. Web Components 开发

开发与工程化

开发流程

环境变量配置

构建优化

CI/CD 集成

Docker 部署

性能与安全

性能特点与优化

依赖预构建优化

代码分割策略

Tree Shaking

CSS 优化

持久化缓存（Vite 8+）

实验性 Bundled Dev Mode（Vite 8.1）

安全注意事项

技术对比

与主流构建工具对比

性能基准数据（2026 年，800 组件 React 应用）

选型建议

最佳实践

生产环境配置优化

1. 构建产物分析

2. 合理配置构建目标

3. 使用 Legacy 插件兼容旧浏览器

4. 预加载关键资源

5. CDN 部署配置

代码分割策略

静态资源处理

常见陷阱与解决方案

1. __dirname / __filename 不可用

2. CommonJS 依赖问题

3. 环境变量类型

4. CSS @import 路径

5. Monorepo 中的依赖解析

技术局限与边界

已知限制

不适用场景

权衡取舍

学习资源

官方资源

社区资源

教程与视频

1. `dirname` / `filename` 不可用