Vue 项目打包优化指南
大约 2 分钟
Vue 项目打包优化指南
打包分析工具
npm run build:analyze
这会生成 dist/report.html 文件，可以可视化查看各模块的大小。
✅ 已实施的优化
1. 代码分割优化
- ✅ 将大型第三方库分别打包
- ✅ Vue 核心库单独打包
- ✅ Element UI 单独打包
- ✅ 地图库 (OpenLayers) 单独打包
- ✅ 图表库 (ECharts) 单独打包
- ✅ 工具库单独打包
2. 代码压缩优化
- ✅ 启用 Terser 压缩
- ✅ 移除 console.log
- ✅ 移除 debugger
- ✅ Gzip 压缩
3. 按需导入配置
- ✅ 创建 ECharts 按需导入 (
src/utils/echarts.js) - ✅ 创建 Element UI 按需导入 (
src/plugins/element.js)
🔄 需要手动执行的步骤
步骤 1: 安装依赖
npm install terser-webpack-plugin@^4.2.3 --save-dev
步骤 2: 修改 main.js 使用按需导入
// 替换原有的 Element UI 导入
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
// 改为按需导入
import '@/plugins/element'
步骤 3: 修改 ECharts 导入
将所有文件中的：
// 替换
import * as echarts from "echarts"
// 改为
import echarts from "@/utils/echarts"
步骤 4: 启用 CDN (可选，进一步优化)
在 vue.config.js 中启用外部依赖：
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
'echarts': 'echarts'
}
然后在 public/index.html 中添加 CDN 链接。
📊 预期优化效果
| 文件 | 优化前 | 预期优化后 | 减少 |
|---|---|---|---|
| chunk-vendors.js | 33.7MB | ~8-12MB | 65-70% |
| app.js | 25.2MB | ~6-10MB | 60-75% |
| 总体积 | 58.9MB | ~15-25MB | 60-75% |
| 加载时间 | 67.31s | ~15-25s | 65-75% |
🛠️ 分析工具
打包分析
npm run build:analyze
这会生成 dist/report.html 文件，可以可视化查看各模块的大小。
运行时分析
在浏览器开发者工具的 Network 面板中查看实际加载情况。
🎯 进一步优化建议
1. 路由懒加载 (已实现)
确保所有路由都使用动态导入：
component: () => import('@/views/xxx')
2. 组件懒加载
对于大型组件，可以使用异步组件：
components: {
HeavyComponent: () => import('@/components/HeavyComponent')
}
3. 图片优化
- 使用 WebP 格式
- 压缩图片
- 使用雪碧图
4. 缓存策略
- 启用浏览器缓存
- 使用 Service Worker
🚀 执行优化
- 立即执行: 运行
npm install安装新依赖 - 修改导入: 按照步骤 2-3 修改导入方式
- 测试构建: 运行
npm run build:prod测试 - 分析结果: 运行
npm run build:analyze查看优化效果
预计优化后，打包体积将减少 60-75%，加载时间将从 67 秒降至 15-25 秒！