Vite — 下一代前端构建

背景

Vite（法语"快"）是尤雨溪打造的下一代前端构建工具。开发时利用浏览器原生 ES Module 实现秒级冷启动，生产构建用 Rollup 优化。

核心概念

1. 为什么 Vite 快？

阶段	Webpack	Vite
冷启动	全量打包 → 10-30s	原生 ESM，按需编译 → <1s
HMR	增量编译，大型项目也慢	与模块数无关，始终 <100ms
构建	Webpack/Rollup	Rollup + esbuild

2. esbuild 预构建

依赖（node_modules）用 esbuild 预打包为 ESM，速度比传统打包器快 10-100 倍。你不需要手动配置 esbuild。

3. 开箱即用

// TypeScript — 零配置
// JSX/TSX — 零配置
// CSS Modules — .module.css 自动识别
// PostCSS — postcss.config.js
// WASM — 直接 import
// Web Workers — new Worker()
// Env Variables — import.meta.env

4. 配置自定义

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080'  // 代理后端
    }
  },
  build: {
    target: 'es2020',
    outDir: 'dist',
  }
})

5. 环境变量

.env                # 所有环境
.env.development    # npm run dev
.env.production     # npm run build

// 使用（仅 VITE_ 前缀暴露给客户端）
const apiUrl = import.meta.env.VITE_API_URL

分步操作

# 创建项目
npm create vite@latest my-app -- --template vue-ts

# 安装依赖
cd my-app &;& npm install

# 启动开发
npm run dev

# 构建
npm run build &;& npm run preview

思考题

1. Vite 开发时用 esbuild，构建时用 Rollup，为什么这样分工？
2. import.meta.glob 的用法和场景？
3. Vite 的 Library Mode 如何配置？

毕设场景

• 所有现代前端项目的开发服务器
• NPM 组件库开发（Library Mode）
• VitePress 写毕设文档