一、前置准备
1. 安装依赖
首先需要安装必要的分析工具：
2. 配置脚本
在 package.json 中添加分析命令：
二、配置分析插件
1. 基础配置
创建或修改 Vite 配置文件：
2. 高级配置
添加更细粒度的分析配置：
三、分析报告解读
1. 文件大小信息
分析报告会显示以下信息：
- 原始大小 (Raw Size)
- Gzip 压缩后大小
- Brotli 压缩后大小
- 占总体积百分比
2. 模块分类
主要包括：
- node_modules 依赖
- 业务代码 (src)
- 静态资源
- 动态导入模块
3. 性能指标
需要关注的指标：
- 首屏加载模块大小
- 懒加载模块数量
- 重复依赖情况
- 未使用代码比例
四、优化策略
1. 代码分割
根据分析结果优化分包策略：
2. 资源优化
针对不同类型资源的优化策略：
五、持续监控
1. 设置包大小预警
在 package.json 中添加大小限制：
2. 自动化分析
创建分析脚本：
六、最佳实践
- 定期分析：
- 每次发版前运行分析
- 对比历史数据
- 及时发现异常增长
- 优化清单：
- 移除未使用的依赖
- 按需加载大型库
- 优化图片资源
- 拆分业务代码
- 配置合理的缓存策略
- 监控指标：
- 首屏加载时间
- 各个 chunk 的大小
- 资源压缩比例
- 缓存命中率
通过以上完整的配置和优化流程，可以有效控制打包体积，提升应用性能。建议定期运行分析，持续优化项目。