第十章：Vite 生态与最佳实践

10.1 官方生态

官方插件

插件	用途
`@vitejs/plugin-vue`	Vue 3 单文件组件支持
`@vitejs/plugin-vue-jsx`	Vue JSX 支持
`@vitejs/plugin-react`	React 支持（含 Fast Refresh）
`@vitejs/plugin-legacy`	传统浏览器支持

官方模板

bash 复制代码

npm create vite@latest
# 选择模板：vanilla, vue, react, preact, lit, svelte

10.2 社区生态

常用插件

框架集成

bash 复制代码

# Vue
npm install -D @vitejs/plugin-vue

# React
npm install -D @vitejs/plugin-react

# Svelte
npm install -D @sveltejs/vite-plugin-svelte

# Solid
npm install -D vite-plugin-solid

样式工具

bash 复制代码

# Tailwind CSS
npm install -D tailwindcss postcss autoprefixer

# UnoCSS（原子化 CSS）
npm install -D unocss

# Windi CSS
npm install -D vite-plugin-windicss

优化工具

bash 复制代码

# 图片压缩
npm install -D vite-plugin-imagemin

# 分析工具
npm install -D rollup-plugin-visualizer

# 检查工具
npm install -D vite-plugin-checker

开发工具

bash 复制代码

# 组件自动导入
npm install -D unplugin-auto-import unplugin-vue-components

# 页面自动导入
npm install -D vite-plugin-pages

# Markdown 支持
npm install -D vite-plugin-md

10.3 框架集成最佳实践

Vue 3 项目结构

复制代码

vue-project/
├── src/
│   ├── components/      # 通用组件
│   ├── composables/     # 组合式函数
│   ├── layouts/         # 布局组件
│   ├── pages/           # 页面组件
│   ├── router/          # 路由配置
│   ├── stores/          # Pinia 状态
│   ├── styles/          # 全局样式
│   ├── utils/           # 工具函数
│   ├── App.vue
│   └── main.js
├── index.html
└── vite.config.js

React 项目结构

复制代码

react-project/
├── src/
│   ├── components/      # 组件
│   ├── hooks/           # 自定义 hooks
│   ├── pages/           # 页面
│   ├── routes/          # 路由
│   ├── stores/          # 状态管理
│   ├── styles/          # 样式
│   ├── utils/           # 工具
│   ├── App.jsx
│   └── main.jsx
├── index.html
└── vite.config.js

10.4 性能优化最佳实践

1. 路由懒加载

javascript 复制代码

// Vue
const Home = () => import('./pages/Home.vue')

// React
const Home = lazy(() => import('./pages/Home'))

2. 图片优化

javascript 复制代码

// 使用 WebP 格式
import logo from './logo.png?webp'

// 响应式图片
<picture>
  <source srcset="./image.webp" type="image/webp">
  <img src="./image.jpg" alt="...">
</picture>

3. 第三方库按需加载

javascript 复制代码

// 动态导入大型库
const moment = await import('moment')

// 使用 CDN
// vite.config.js
build: {
  rollupOptions: {
    external: ['react', 'react-dom'],
    output: {
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      }
    }
  }
}

10.5 开发体验优化

路径别名配置

javascript 复制代码

resolve: {
  alias: {
    '@': '/src',
    '@components': '/src/components',
    '@utils': '/src/utils',
    '@assets': '/src/assets'
  }
}

TypeScript 配置

json 复制代码

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"]
    }
  }
}

自动导入组件

javascript 复制代码

// unplugin-vue-components
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    Components({
      resolvers: [AntDesignVueResolver()],
      dts: true  // 生成类型声明
    })
  ]
}

10.6 代码规范

ESLint 配置

bash 复制代码

npm install -D eslint eslint-plugin-vue @typescript-eslint/parser

javascript 复制代码

// .eslintrc.js
module.exports = {
  extends: ['plugin:vue/vue3-recommended'],
  rules: {
    'vue/multi-word-component-names': 'off'
  }
}

Prettier 配置

json 复制代码

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

10.7 部署最佳实践

环境区分

javascript 复制代码

// .env.production
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

// .env.staging
VITE_API_URL=https://staging-api.example.com

构建优化

javascript 复制代码

build: {
  // 生成 sourcemap（生产环境建议关闭）
  sourcemap: false,
  
  // chunk 大小警告
  chunkSizeWarningLimit: 1000,
  
  // 压缩选项
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: true,  // 移除 console
      drop_debugger: true  // 移除 debugger
    }
  }
}

CDN 部署

javascript 复制代码

// 根据环境配置 base
export default defineConfig(({ mode }) => ({
  base: mode === 'production' ? 'https://cdn.example.com/' : '/'
}))

10.8 测试最佳实践

Vitest 配置

bash 复制代码

npm install -D vitest @vue/test-utils jsdom

javascript 复制代码

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

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: {
      reporter: ['text', 'json', 'html']
    }
  }
})

单元测试示例

javascript 复制代码

// Button.test.js
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Button from './Button.vue'

describe('Button', () => {
  it('renders correctly', () => {
    const wrapper = mount(Button, {
      slots: { default: 'Click me' }
    })
    expect(wrapper.text()).toBe('Click me')
  })
})

10.9 常见陷阱与避免

陷阱 1：直接修改 import.meta.env

javascript 复制代码

// ❌ 错误
import.meta.env.VITE_CUSTOM = 'value'

// ✅ 正确：使用 .env 文件
// 或通过 define 配置

陷阱 2：忽略构建时的环境变量

javascript 复制代码

// ❌ 在构建时不会替换
const apiUrl = process.env.VITE_API_URL

// ✅ 使用 import.meta.env
const apiUrl = import.meta.env.VITE_API_URL

陷阱 3：public 目录中的资源被错误引用

javascript 复制代码

// public 中的资源直接通过 / 引用
<img src="/logo.png" />  // ✅
<img src="./public/logo.png" />  // ❌

10.10 持续演进

关注 Vite 版本更新

关注 GitHub Releases
阅读迁移指南
测试新版本兼容性

社区贡献

提交 Issue 和 PR
编写插件
分享最佳实践
参与讨论

本章小结

Vite 生态丰富，最佳实践包括：

选择合适的插件
遵循项目结构规范
实施性能优化策略
配置代码规范
做好测试和部署
持续学习和贡献

掌握这些，就能高效使用 Vite 构建现代前端应用。