Vite 与 esbuild
webpack 的痛点是开发启动慢（启动前必须打包完整个依赖图）。Vite 的思路：开发时根本不打包——直接用浏览器原生的 ESM，请求哪个模块就编译哪个模块（按需编译），所以项目再大启动也是毫秒级。
生产环境 Vite 用 Rollup 打包（产物更小）。对于大量 CommonJS 依赖（如老旧 npm 包），Vite 用 esbuild（Go 写的极速编译器）做“预构建”把它们转成 ESM，速度比 webpack 快一到两个数量级。
- Vite dev = 浏览器原生 ESM + 按需编译，启动不随项目变大而变慢
- esbuild 用 Go 写，编译速度是 JS 工具的 10~100 倍
- 生产构建用 Rollup：分包与 Tree Shaking 更成熟
配置
// vite.config.js —— 常用配置一览 import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], // 框架支持以插件形式接入 resolve: { alias: { '@': '/src' }, // 路径别名：import x from '@/utils/x' }, server: { port: 5173, open: true, // 自动开浏览器 proxy: { // 开发环境接口代理，解决跨域 '/api': { target: 'http://localhost:3000', changeOrigin: true }, }, }, build: { outDir: 'dist', rollupOptions: { output: { manualChunks: { vue: ['vue', 'vue-router'] } }, // 简单分包 }, }, }); // 创建项目：npm create vite@latest my-app -- --template vue
本节要点Vite 开发靠原生 ESM 按需编译（秒开），生产靠 Rollup 打包；esbuild 是速度引擎。
