vite详细打包配置，包含性能优化、资源处理...

一、以下是针对Vite项目的详细打包配置补充，包含性能优化、资源处理和特殊需求配置：

---

vite.config.ts 完整打包配置示例

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { visualizer } from 'rollup-plugin-visualizer'
import legacy from '@vitejs/plugin-legacy'
import { terser } from 'rollup-plugin-terser'// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {// 环境变量加载const env = loadEnv(mode, process.cwd())return {plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],dts: 'src/types/auto-imports.d.ts' // 自动导入类型声明}),Components({resolvers: [ElementPlusResolver()],dts: 'src/types/components.d.ts' // 组件类型声明}),// 打包分析插件（仅生产环境）mode === 'production' && visualizer({open: true,gzipSize: true,brotliSize: true}),// 浏览器兼容插件legacy({targets: ['defaults', 'not IE 11']})],// 构建配置build: {target: 'es2015', // 编译目标outDir: 'dist',  // 输出目录assetsDir: 'assets', // 静态资源目录sourcemap: env.VITE_SOURCEMAP === 'true', // 按需开启minify: 'terser', // 压缩方式cssCodeSplit: true, // CSS代码分割// Rollup配置rollupOptions: {output: {// 代码分割策略manualChunks(id) {if (id.includes('node_modules')) {return 'vendor'}if (id.includes('src/router')) {return 'router'}},// 文件命名规则chunkFileNames: 'js/[name]-[hash].js',entryFileNames: 'js/[name]-[hash].js',assetFileNames: 'assets/[ext]/[name]-[hash][extname]'},// 外部依赖排除（如有需要）external: ['some-cdn-library']},// Terser压缩配置terserOptions: {compress: {drop_console: true,  // 移除consoledrop_debugger: true  // 移除debugger},format: {comments: false // 移除注释}}},// 开发服务器配置server: {port: 5173, // 开发端口open: true  // 自动打开浏览器},// 路径别名配置resolve: {alias: {'@': '/src','#': '/types'}},// CSS预处理器配置css: {preprocessorOptions: {scss: {additionalData: `@use "@/styles/variables.scss" as *;`}}}}
})

---

关键配置说明

1. 代码分割优化

rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {// 将node_modules代码单独打包if (id.includes('element-plus')) return 'element-plus'if (id.includes('lodash')) return 'lodash'return 'vendor'}}}
}

2. 静态资源处理

build: {assetsInlineLimit: 4096, // 小于4KB的资源转为base64// 复制公共资源到dist目录assetsInclude: ['public/**/*.pdf']
}

3. 兼容性处理

// 安装旧浏览器支持插件
npm install @vitejs/plugin-legacy -D// 配置
legacy({targets: ['> 0.5%', 'last 2 versions'],modernPolyfills: true
})

---

自定义打包命令

// package.json
{"scripts": {"build": "vite build","build:stage": "vite build --mode staging","build:analyze": "vite build --mode production && vite preview --port 4173","preview": "vite preview --port 4173"}
}

---

环境变量配置

# .env.production
VITE_API_BASE_URL = /api/
VITE_SOURCEMAP = false# .env.staging
VITE_API_BASE_URL = http://stage-api.example.com

---

优化建议

1. 图片压缩：

   npm install vite-plugin-imagemin -D
   

   import imagemin from 'vite-plugin-imagemin'
   // 添加到plugins数组
   imagemin({gifsicle: { optimizationLevel: 7 },optipng: { optimizationLevel: 7 }
   })
   

2. Gzip压缩：

   npm install vite-plugin-compression -D
   

   import compression from 'vite-plugin-compression'
   // 添加到plugins数组
   compression({algorithm: 'gzip',ext: '.gz'
   })
   

3. CDN加速：

   // vite.config.ts
   build: {rollupOptions: {external: ['vue', 'element-plus'],output: {globals: {'vue': 'Vue','element-plus': 'ElementPlus'}}}
   }
   

---

常见打包问题解决

1. 文件体积过大：

   • 使用rollup-plugin-visualizer分析包组成
   • 按需加载第三方库（如Element Plus）
   • 开启Gzip/Brotli压缩

2. 路由懒加载失效：

   // 确保使用动态导入语法
   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   

3. 静态资源404：

   // 使用绝对路径
   new URL(`/src/assets/image.png`, import.meta.url).href
   

4. 样式丢失：

   // 强制CSS注入
   build: {cssTarget: 'chrome61' // 兼容低版本浏览器
   }
   

---

通过以上配置，可以实现：

• 代码体积优化（减少30%-50%）
• 首屏加载速度提升
• 更好的浏览器兼容性
• 清晰的构建产物结构
• 便捷的多环境打包支持

实际配置时需根据项目具体需求调整参数，建议结合vite build --mode yourmode实现多环境差异化打包。