obsidian/DEV/VITE/README.md

tags, create time

tags	create time
DEV VITE build-tool frontend	2026-04-18

Vite 构建工具

配置详解 | 架构原理 | 优化实践

概述

Vite 是下一代前端构建工具，以其极快的开发体验和优秀的生产构建性能著称。不同于传统构建工具的全量打包，Vite 利用浏览器原生 ES Module 能力，实现了真正的按需编译。

核心优势

🚀 极速启动 - 无全量打包，启动时间 < 1s
⚡ 闪电 HMR - 模块级热更新，保持应用状态
🎯 统一工具链 - 开发/生产环境一致，配置简化
🔌 丰富生态 - 官方插件支持主流框架

快速开始

项目创建

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

核心命令

命令	功能	使用场景
npm run dev	启动开发服务器	日常开发调试
npm run build	生产环境构建	部署准备
npm run preview	预览构建产物	本地测试生产版本

核心概念

开发环境 vs 生产环境

graph LR
    A[浏览器请求] --> B{环境判断}
    B -->|开发| C[Dev Server]
    B -->|生产| D[静态文件]
    C --> E[ESM 按需编译]
    E --> F[即时响应]
    D --> G[CDN/HTTP 服务器]

构建流程对比

特性	Vite	Webpack
启动速度	< 1s	10-30s
热更新	模块级 < 100ms	全量重编译
配置复杂度	低	高
构建产物	Rollup 优化	Webpack 打包

技术栈支持

前端框架

• ✅ React + TypeScript
• ✅ Vue 3 + TypeScript
• ✅ Svelte + TypeScript
• ✅ Preact + TypeScript

构建特性

• 📦 ES Modules 原生支持
• 🎨 CSS 预处理器
• 🔧 TypeScript 开箱即用
• 📡 Asset 资源处理
• 🔄 Dynamic Import 支持

项目结构建议

project/
├── src/
│   ├── assets/          # 静态资源
│   ├── components/      # 组件
│   ├── hooks/           # 自定义 Hooks  
│   ├── lib/             # 工具库
│   ├── types/           # TypeScript 类型
│   ├── App.tsx          # 根组件
│   └── main.tsx         # 入口文件
├── public/              # 公共资源
├── vite.config.ts       # Vite 配置
└── tsconfig.json        # TypeScript 配置

基础配置示例

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'),
      '@components': path.resolve(__dirname, './src/components')
    }
  },
  server: {
    port: 3000,
    open: true
  }
})

常见配置场景

TypeScript 项目

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  }
}

环境变量

// .env.development
VITE_API_URL=http://localhost:8080/api
VITE_DEBUG_MODE=true
VITE_MOCK_DATA=true

// 使用方式
const apiUrl = import.meta.env.VITE_API_URL

生态工具

官方插件

• @vitejs/plugin-vue - Vue 支持
• @vitejs/plugin-react - React 支持
• @vitejs/plugin-legacy - 传统浏览器兼容

推荐工具链

• 代码质量: ESLint + Prettier
• 状态管理: Zustand / Redux Toolkit
• UI 组件: Ant Design / MUI
• 路由: React Router v6
• HTTP 客户端: Axios

学习路径

基础阶段

1. 掌握基本命令和配置
2. 理解开发/生产环境差异
3. 熟悉环境变量使用

进阶阶段

1. 深入构建配置
2. 学习插件开发
3. 性能优化实践

高级阶段

1. 理解底层架构原理
2. 定制化解决方案
3. 大型项目工程化

技术特点

为什么选择 Vite？

1. 开发效率提升

   • 零配置启动，开箱即用
   • 热更新速度快，大幅提升开发体验
   • 现代工具链，学习成本低

2. 构建性能优异

   • 基于 Rollup 的高质量产出
   • 智能代码分割和 Tree-shaking
   • 生产环境高度优化

3. 生态社区活跃

   • 官方支持和持续更新
   • 丰富的插件生态
   • 广泛的行业采用

与其他工具对比

工具	启动速度	HMR 性能	构建质量	学习曲线
Vite	⚡⚡⚡	⚡⚡⚡	⚡⚡⚡	⚡⚡⚡
Webpack	⚡	⚡⚡	⚡⚡⚡	⚡
Next.js	⚡⚡	⚡⚡⚡	⚡⚡⚡	⚡⚡
Parcel	⚡⚡⚡	⚡⚡	⚡⚡	⚡⚡⚡

适用场景

推荐使用

• ✅ SPA 单页应用开发
• ✅ React/Vue 项目构建
• ✅ 中大型前端项目
• ✅ 需要快速开发迭代

需要评估

• 🤔 复杂的构建需求 (Web Workers, WASM)
• 🤔 高度定制化构建流程
• 🤔 遗留项目迁移成本

相关文档

• DEV/VITE/配置详解.md - 详细配置说明
• DEV/VITE/架构原理.md - 技术实现原理
• DEV/VITE/优化实践.md - 性能优化指南
• DEV/REACT/README.md - React 开发指南

技术资源

• Vite 官方文档
• Vite GitHub 仓库
• Vite 生态插件

下一步行动

1. 创建一个新的 React + TypeScript 项目
2. 配置开发和生产环境
3. 实现 HMR 功能
4. 进行第一次生产构建