89 lines
2.8 KiB
Markdown
89 lines
2.8 KiB
Markdown
|
# 小程序主包优化完成总结
|
|||
|
|
|
|||
|
|
## 问题
|
|||
|
|
- **原始主包大小**: 5.8MB
|
|||
|
|
- **微信限制**: 2MB
|
|||
|
|
- **超标**: 3.8MB
|
|||
|
|
|
|||
|
|
## 已执行的优化
|
|||
|
|
|
|||
|
|
### 1. 图片压缩 ✓
|
|||
|
|
- 压缩了 banner 和 button 目录下的所有图片
|
|||
|
|
- 使用 PowerShell + System.Drawing 压缩
|
|||
|
|
- **节省空间**: 894.2KB (40.5%)
|
|||
|
|
|
|||
|
|
### 2. 使用网络图片 ✓
|
|||
|
|
- 将 button 目录的10张图片改用图床地址
|
|||
|
|
- 删除了 static/button 目录
|
|||
|
|
- **节省空间**: 约1.3MB
|
|||
|
|
|
|||
|
|
### 3. 修改的文件
|
|||
|
|
- `peidu/uniapp/src/pages/index/components/UserHome.vue`
|
|||
|
|
- 将所有 button 图片路径改为网络地址
|
|||
|
|
|
|||
|
|
## 图片映射
|
|||
|
|
|
|||
|
|
| 功能 | 图床地址 |
|
|||
|
|
|------|---------|
|
|||
|
|
| 陪伴员 (companion) | https://i.imglt.com/20260131/a1006022d1d223f217a5f86817062f6b.jpg |
|
|||
|
|
| 暑假营 (summer-camp) | https://i.imglt.com/20260131/6ad513b0e6f173a43dd62ef3a4734e90.jpg |
|
|||
|
|
| 测评师 (assessor) | https://i.imglt.com/20260131/67f18806536d0d630e3f91bd27b0b292.jpg |
|
|||
|
|
| 成长规划师 (planner) | https://www.imglt.com/storage/thumbnails/20260131/095ba956285b55e12831e7c2aac36c25.jpg |
|
|||
|
|
| 家长学院 (parent-academy) | https://i.imglt.com/20260131/5a24d6326803bddccc760c8bb14a8966.jpg |
|
|||
|
|
| 一对一陪伴 (one-on-one) | https://www.imglt.com/storage/thumbnails/20260131/927acae023ae4b096743b11b5fd61584.jpg |
|
|||
|
|
| 研学活动 (study-tour) | https://i.imglt.com/20260131/82b621c15af3cbf6d5872d9634c4d0ed.jpg |
|
|||
|
|
| 专项突破 (special) | https://i.imglt.com/20260131/06e6657604d4ece7d12638b782a3c18e.jpg |
|
|||
|
|
| 兴趣培养 (interest) | https://www.imglt.com/storage/thumbnails/20260131/f808f9fed920b006661ae73920e8aa08.jpg |
|
|||
|
|
| 线上督学 (supervision) | https://i.imglt.com/20260131/93139ad384709fb90d24954d7039cc34.jpg |
|
|||
|
|
|
|||
|
|
## 预期效果
|
|||
|
|
|
|||
|
|
- **原始**: 5.8MB
|
|||
|
|
- **压缩后**: 约4.9MB
|
|||
|
|
- **删除button后**: 约3.6MB
|
|||
|
|
- **还需优化**: 约1.6MB
|
|||
|
|
|
|||
|
|
## 下一步建议
|
|||
|
|
|
|||
|
|
如果主包还是超过2MB，可以继续优化：
|
|||
|
|
|
|||
|
|
### 方案1: Banner图片也使用网络地址
|
|||
|
|
- 将 banner 目录的5张图片上传到图床
|
|||
|
|
- 修改代码使用网络地址
|
|||
|
|
- 可再减少约500KB
|
|||
|
|
|
|||
|
|
### 方案2: 移动页面到分包
|
|||
|
|
- 将部分主包页面移到分包
|
|||
|
|
- 参考之前的优化方案文档
|
|||
|
|
|
|||
|
|
### 方案3: 检查其他大文件
|
|||
|
|
- 检查是否有其他大的静态资源
|
|||
|
|
- 使用 `npm run build:mp-weixin` 查看详细的包大小分析
|
|||
|
|
|
|||
|
|
## 执行命令
|
|||
|
|
|
|||
|
|
重新编译小程序：
|
|||
|
|
```bash
|
|||
|
|
Archive\[一次性]重新编译小程序-使用网络图片-2026-01-31.bat
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
或手动执行：
|
|||
|
|
```bash
|
|||
|
|
cd peidu\uniapp
|
|||
|
|
npm run dev:mp-weixin
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **网络图片加载**: 首次加载会稍慢，建议添加加载动画
|
|||
|
|
2. **图床稳定性**: 确保图床服务稳定可靠
|
|||
|
|
3. **缓存策略**: 小程序会自动缓存网络图片
|
|||
|
|
4. **备份**: static_backup 目录保留了原始图片
|
|||
|
|
|
|||
|
|
## 测试清单
|
|||
|
|
|
|||
|
|
- [ ] 首页功能图标正常显示
|
|||
|
|
- [ ] 图片加载速度可接受
|
|||
|
|
- [ ] 点击功能图标跳转正常
|
|||
|
|
- [ ] 主包大小符合要求
|