本文将深度解析 Vite 的核心配置与优化策略，结合实际场景，掌握从开发调试到生产部署的全流程优化技巧。
一、Vite 核心配置详解
1.1 基础配置：定义项目边界
// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
root: path.resolve(__dirname, 'src'), // 项目根目录
base: '/my-app/', // 部署基础路径
publicDir: 'static', // 静态资源目录
envDir: './env', // 环境变量目录
mode: 'production' // 指定运行模式
})
关键配置项：
root: 定义项目源码目录，影响所有路径解析base: 重要！影响构建后的资源引用路径（如 CDN 部署）publicDir: 存放无需打包的静态资源（如 favicon.ico）
1.2 开发服务器配置：提升调试体验
export default defineConfig({
server: {
port: 3000,
host: '0.0.0.0', // 允许外网访问
proxy: {
'/api': {
target: 'http://localhost:3001',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
},
open: true, // 启动自动打开浏览器
https: true // 启用 HTTPS 开发环境
}
})
面试考点：
- 代理配置如何解决跨域问题？
host: '0.0.0.0'的作用是什么？
1.3 构建配置：生产环境优化
export default defineConfig({
build: {
outDir: 'dist', // 输出目录
assetsDir: 'assets', // 静态资源子目录
assetsInlineLimit: 4096, // 小资源内联阈值
rollupOptions: {
output: {
manualChunks: {
vue: ['vue', 'vue-router', 'pinia'], // 手动拆分第三方依赖
lodash: ['lodash-es']
}
},
external: ['vue'] // 标记外部依赖（通过 CDN 引入）
},
minify: 'terser' // 使用更激进的压缩算法
}
})
优化技巧：
- 通过
manualChunks实现代码分割，减少首屏加载时间 - 使用
external配合 CDN 加速第三方库加载
二、开发环境优化：让 HMR 飞起来
2.1 依赖预构建：Vite 的性能魔法
Vite 通过 Esbuild 预构建依赖，解决：
- CommonJS → ESM 转换：兼容旧版模块
- 依赖合并：减少网络请求量
- 缓存机制：避免重复编译
配置示例：
export default defineConfig({
optimizeDeps: {
include: ['axios', 'lodash-es'], // 强制预构建
exclude: ['@vue/compiler-dom'] // 排除预构建
}
})
面试问题：
- 为什么需要依赖预构建？
- 预构建失败时如何排查？
2.2 HMR 热更新优化
Vite 的 HMR 机制基于原生 ESM，仅更新修改模块，实现：
- 毫秒级更新：无需全量刷新
- 精准更新：仅影响相关模块
最佳实践：
- 避免在全局作用域修改状态（如 Vuex 的 store）
- 合理拆分组件，控制单个模块体积
三、生产环境优化：构建速度与输出质量
3.1 代码分割与懒加载
通过动态导入实现按需加载：
// 路由配置示例
const router = createRouter({
routes: [
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue') // 懒加载
}
]
})
优化效果：
- 减少首屏加载体积
- 提升页面初始加载速度
3.2 资源压缩与优化
- 启用 Terser 压缩：比默认 esbuild 压缩率更高
- 图片优化：使用
vite-plugin-imagemin自动压缩图片 - 字体优化：通过
vite-plugin-font-optimization合并字体文件
配置示例：
import viteImagemin from 'vite-plugin-imagemin'
export default defineConfig({
plugins: [
viteImagemin({
gifsicle: { optimizationLevel: 3 },
mozjpeg: { quality: 80 }
})
]
})
3.3 兼容性处理：旧浏览器支持
使用 @vitejs/plugin-legacy 生成兼容代码：
import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
plugins: [
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
]
})
注意事项：
- 会增加构建体积，需权衡兼容性与性能
四、Vite 插件生态：扩展无限可能
4.1 常用插件推荐
unplugin-auto-import：自动导入 API（如 Vue 组合式函数）vite-plugin-compression：生成 gzip/brotli 压缩文件vite-plugin-pages：文件系统路由（类似 Nuxt）vite-plugin-pwa：快速集成 PWA 功能
4.2 自定义插件开发
// 示例：日志插件
export default function logPlugin() {
return {
name: 'log-plugin',
transform(code, id) {
console.log(`Processing file: ${id}`)
return code
}
}
}
五、总结：Vite 优化核心原则
-
开发环境：
- 利用原生 ESM 特性，实现快速冷启动
- 通过依赖预构建和 HMR 优化调试体验
-
生产环境：
- 合理拆分代码，利用缓存策略
- 压缩资源，通过 CDN 加速第三方依赖
-
通用原则：
- 善用插件生态，避免重复造轮子
- 持续监控构建指标（如首屏加载时间）
