# 微信小程序主包体积优化方案 ## 当前主包体积分析 根据代码依赖分析图,主包体积为 **2.74MB**,主要组成部分: ### 1. 静态资源 (848KB) - **images (507KB)**: 包含多个大图片文件 - `video-bj2.png`: 156KB - `video-jt.png`: 126KB - `spxx-k.png`: 54KB - `bj.jpg`: 52KB - `imgs/avatar.jpg`: 48KB - **icon (187KB)**: 图标文件 ### 2. JavaScript 库文件 - **uni_modules/lime-echart/static/echarts.min.js**: 568KB ⚠️ - **lib/lunar-javascript@1.7.2.js**: 301KB ⚠️ - **lib/highlight/highlight-uni.min.js**: 166KB - **common/vendor.js**: 293KB (未找到,可能已删除) ### 3. 其他 - **uni_modules**: 751KB - **pages**: 363KB - **common**: 316KB --- ## 优化方案 ### 方案一:删除主包中未使用的大文件(立即执行) #### 1.1 删除主包中的 echarts.min.js **问题**: `uni_modules/lime-echart/static/echarts.min.js` (568KB) 在主包中,但只在 `packageCa` 分包中使用。 **解决方案**: - ✅ 确认 `packageCa` 分包中已有 `packageCa/utilCa/echarts.min.js` - ✅ 删除主包中的 `uni_modules/lime-echart/static/echarts.min.js`(如果不需要在主包使用) - ⚠️ 注意:如果主包页面也需要使用 echarts,需要保留或按需加载 **操作步骤**: ```bash # 检查主包中是否有页面使用 echarts # 如果没有,可以删除或移动到分包 ``` #### 1.2 删除主包中的 lunar-javascript@1.7.2.js **问题**: `lib/lunar-javascript@1.7.2.js` (301KB) 在主包中,但只在 `packageA/pages/selectDate/selectDate.vue` 中使用。 **解决方案**: - ✅ 确认 `packageA/lib/lunar-javascript@1.7.2.js` 已存在 - ✅ 删除主包中的 `lib/lunar-javascript@1.7.2.js` - ✅ 更新 `packageA/pages/selectDate/selectDate.vue` 中的引用路径 **操作步骤**: 1. 确认 `packageA/lib/lunar-javascript@1.7.2.js` 存在 2. 删除 `lib/lunar-javascript@1.7.2.js` 3. 确保 `packageA/pages/selectDate/selectDate.vue` 使用分包内的文件 --- ### 方案二:优化图片资源(预计减少 300-400KB) #### 2.1 压缩大图片文件 **目标图片**: - `static/images/train/video-bj2.png` (156KB) → 目标: <80KB - `static/images/train/video-jt.png` (126KB) → 目标: <60KB - `static/images/train/spxx-k.png` (54KB) → 目标: <30KB - `static/images/train/bj.jpg` (52KB) → 目标: <30KB - `static/imgs/avatar.jpg` (48KB) → 目标: <25KB **工具推荐**: - [TinyPNG](https://tinypng.com/) - PNG压缩 - [Squoosh](https://squoosh.app/) - 在线图片压缩 - [ImageOptim](https://imageoptim.com/) - 批量压缩 #### 2.2 将非首屏必需图片移到分包 **策略**: - 将 `static/images/train/` 目录下的图片移到 `packageB` 分包(培训相关) - 只在需要时加载这些图片 **操作步骤**: 1. 创建 `packageB/static/images/train/` 目录 2. 移动图片文件到分包 3. 更新相关页面的图片路径 --- ### 方案三:优化 markdown 相关库(预计减少 166KB) #### 3.1 将 highlight-uni.min.js 移到分包 **问题**: `lib/highlight/highlight-uni.min.js` (166KB) 在 `utils/markdownParser.js` 中使用,主要用于 chat 页面。 **解决方案**: - 方案A: 将 markdown 相关库移到独立分包,按需加载 - 方案B: 使用更轻量的代码高亮库 - 方案C: 如果只在 chat 页面使用,可以移到 chat 页面所在的分包 **推荐方案**: 方案C - 将 markdown 相关库移到 chat 页面附近 **操作步骤**: 1. 创建 `pages/chat/lib/` 目录 2. 移动 `lib/highlight/` 和 `lib/markdown-it.min.js` 到该目录 3. 更新 `utils/markdownParser.js` 中的引用路径 --- ### 方案四:清理未使用的 uni_modules(预计减少 100-200KB) #### 4.1 检查 uni_modules 使用情况 **需要检查的模块**: - `custom-waterfalls-flow` - 检查是否在主包使用 - `uni-data-select` - 检查是否在主包使用 - `uni-dateformat` - 检查是否在主包使用 - `uni-load-more` - 检查是否在主包使用 - `uni-popup` - 检查是否在主包使用 - `uni-steps` - 检查是否在主包使用 - `uni-swipe-action` - 检查是否在主包使用 - `uni-transition` - 检查是否在主包使用 **操作步骤**: 1. 搜索每个模块在主包中的使用情况 2. 如果只在分包中使用,可以考虑移除主包的引用 3. 使用 `easycom` 配置确保组件能正确加载 --- ### 方案五:代码分割和按需加载 #### 5.1 使用分包预加载 在 `pages.json` 中配置分包预加载,优化用户体验: ```json { "preloadRule": { "pages/index/index": { "network": "all", "packages": ["packageA"] } } } ``` #### 5.2 动态导入大型库 对于只在特定场景使用的大型库,使用动态导入: ```javascript // 示例:按需加载 echarts const loadEcharts = async () => { if (typeof require !== 'undefined') { return require('../../utilCa/echarts.min.js'); } else { return await import('../../utilCa/echarts.min.js'); } }; ``` --- ## 优化效果预估 | 优化项 | 预计减少体积 | 优先级 | |--------|------------|--------| | 删除主包 echarts.min.js | 568KB | 🔴 高 | | 删除主包 lunar-javascript | 301KB | 🔴 高 | | 压缩图片资源 | 300-400KB | 🟡 中 | | 优化 markdown 库 | 166KB | 🟡 中 | | 清理未使用模块 | 100-200KB | 🟢 低 | **总计预计减少**: 1.4MB - 1.6MB **优化后主包体积**: 约 1.1MB - 1.3MB ✅ --- ## 实施步骤 ### 第一阶段:立即执行(预计减少 869KB)✅ 已完成 1. ✅ 删除主包中未使用的 `echarts.min.js` (567KB) - **已完成** 2. ✅ 删除主包中未使用的 `lunar-javascript@1.7.2.js` (301KB) - **已完成** 3. ✅ 验证分包中的文件引用正确 - **已验证** **第一阶段优化结果**: 已减少 **868KB** 主包体积 ### 第二阶段:图片优化(预计减少 300-400KB) 1. 压缩大图片文件 2. 将非首屏图片移到分包 3. 更新图片路径引用 ### 第三阶段:代码优化(预计减少 166-366KB) 1. 优化 markdown 相关库的位置 2. 清理未使用的 uni_modules 3. 配置分包预加载 --- ## 注意事项 1. **备份**: 在执行删除操作前,请先备份项目 2. **测试**: 每个优化步骤后都要进行完整测试 3. **引用路径**: 确保所有文件引用路径正确更新 4. **分包限制**: 注意微信小程序分包大小限制(单个分包不超过 2MB) 5. **主包限制**: 主包大小建议控制在 1.5MB 以内 --- ## 验证方法 1. 使用微信开发者工具上传代码,查看主包体积 2. 使用代码依赖分析工具验证优化效果 3. 测试各个功能模块确保正常工作 4. 检查分包加载是否正常 --- ## 后续维护建议 1. **定期检查**: 每月检查主包体积,防止体积反弹 2. **图片规范**: 建立图片压缩和优化规范 3. **依赖管理**: 新增依赖时评估对主包体积的影响 4. **代码审查**: 在代码审查时关注主包体积变化