Vite：下一代前端构建工具入门与实践

1. 为什么用 Vite？

• 开发时启动和页面更新非常快，尤其是大型项目体验明显优于传统打包工具（如 Webpack）。

• 利用了浏览器原生 ES 模块（ESM）在开发环境下按需加载文件，避免整包编译。

• 生产构建使用 Rollup，产物优化好（code-splitting、tree-shaking）。

• 插件生态丰富，支持 Vue / React / Svelte 等主流框架。

2. 工作原理（简单版）

• 开发环境（vite dev）

  • 浏览器请求某个模块时，Vite 直接读取源码并返回 ESM 格式给浏览器。

  • 对第三方依赖（node_modules），Vite 在启动时用 esbuild 预构建为 ESM，提高解析速度。

  • HMR（热模块替换）基于 WebSocket，更新反应很快。

• 生产构建（vite build）

  • 使用 Rollup 做打包、拆分和 tree-shaking，生成可部署的静态文件。

3. 快速开始（例子）

使用 npm 创建一个项目（官方推荐流程）：

# 推荐方式（交互选择框架）
npm create vite@latest my-app
cd my-app
npm install
npm run dev

或者直接用模板（React 示例）：

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

常见脚本（package.json）：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

打开 http://localhost:5173（默认端口）就能看到页面。

4. 示例配置（vite.config.ts）

下面是一个 React + TypeScript 项目的常见配置示例，带别名、代理与插件：

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // 用 @ 表示 src 目录
    }
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    outDir: 'dist',
    assetsInlineLimit: 4096 // 小于 4KB 的资源会被内联为 base64
  }
})

说明：

• alias：简化导入路径（import x from '@/utils'）。

• server.proxy：开发时把 /api 转发到后端，避免跨域。

• assetsInlineLimit：控制小资源是否内联。

5. 环境变量与运行时配置

Vite 中只有以 VITE_ 开头的环境变量会被注入客户端代码。例如在 .env 文件：

VITE_API_BASE=/api

在代码中读取：

const base = import.meta.env.VITE_API_BASE
console.log('API base:', base)

注意：不要在客户端暴露敏感变量（如密钥）。

6. 插件示例

常用插件安装：

npm install -D @vitejs/plugin-react vite-plugin-checker

在 vite.config.ts 中使用：

import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker'

plugins: [
  react(),
  checker({ typescript: true }) // 在开发时做 TS 类型检查
]

说明：

• @vitejs/plugin-react：支持 JSX/快速刷新（Fast Refresh）。

• vite-plugin-checker：在终端或浏览器 overlay 显示类型/lint 错误（Vite 默认不会做完整 TS 检查）。

7. 代码分割（懒加载）示例

路由级拆分示例（React）：

// App.tsx
import { Suspense, lazy } from 'react'
const Home = lazy(() => import('./pages/Home'))
const About = lazy(() => import('./pages/About'))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {/* 路由或条件渲染时会按需加载模块 */}
      <Home />
      <About />
    </Suspense>
  )
}

这样生产构建时会生成拆分包，提高首屏加载速度。

8. 从 Webpack 迁移要注意的点

• loader 与 plugin：Webpack 的 loader 需要用 Vite 等价插件替代（例如处理 SVG、图片或样式）。

• 环境变量：Vite 的客户端变量必须以 VITE_ 开头。

• 全局样式 / CSS Modules 的配置位置与写法有所不同。

• 如果需要兼容非常老的浏览器（如 IE11），需要使用 @vitejs/plugin-legacy，但会牺牲构建速度和体积。

• Vite dev 不做完整的 TypeScript 类型检查：需额外运行 tsc --noEmit 或 vite-plugin-checker。

9. 常见问题与排查建议

• HMR 不生效

  • 检查是否使用了非 ESM 的第三方库（可能需要预构建）。

  • 检查代理或反向代理是否阻断了 WebSocket（HMR 用到）。

• 控制台报 require is not defined

  • 某个依赖仍以 CommonJS 提供，需要把它加入 optimizeDeps.include，或者在生产构建时外置（external）处理。

• 类型错误但页面不提示

  • Vite dev 环境不做类型检查，需用 vite-plugin-checker 或在 CI/本地运行 tsc。

optimizeDeps 示例（vite.config.ts）：

optimizeDeps: {
  include: ['some-cjs-lib'],
  exclude: ['large-esm-only-lib']
}

10. 性能优化小贴士

• 使用路由/组件懒加载做代码拆分。

• 在生产使用 gzip 或 brotli 压缩（CDN 或服务器配置）。

• 用 Rollup 分析工具查看打包体积（rollup-plugin-visualizer）。

• 对大资源（图片、视频）使用 CDN，或延迟加载。

• 对 node_modules 中慢速依赖，使用 optimizeDeps 手动包含预构建。

示例：添加构建分析

npm install -D rollup-plugin-visualizer

vite.config.ts 中：

import { visualizer } from 'rollup-plugin-visualizer'

build: {
  rollupOptions: {
    plugins: [visualizer({ open: true })]
  }
}

11. SSR / SSG 简要说明

• Vite 提供 SSR 构建支持，但通常结合框架（如 Nuxt 3、SvelteKit、VitePress）更方便。

• SSR 场景需要处理 server entry、外部化依赖（externals）以及客户端 hydration。

12. 总结

• Vite 的核心优势是“开发体验快”，非常适合现代前端开发流程。

• 新项目推荐直接使用 Vite 启动；已有大型 Webpack 项目可以分步迁移（替换 loader、配置别名、校验依赖）。

• 配置简单、插件生态丰富，结合 esbuild 与 Rollup，兼顾速度与产物质量。

参考与延伸阅读

• 官方文档：https://vitejs.dev

• @vitejs/plugin-react / @vitejs/plugin-vue

• vite-plugin-checker、unplugin 系列插件