124 lines
3.1 KiB
Markdown
124 lines
3.1 KiB
Markdown
|
# 小程序代码包优化总结
|
|||
|
|
|
|||
|
|
## 问题
|
|||
|
|
- 原始代码包: **40957KB** (40MB)
|
|||
|
|
- 微信小程序主包限制: **2048KB** (2MB)
|
|||
|
|
- 错误信息: `main package source size 40957KB exceed max limit 2048KB`
|
|||
|
|
|
|||
|
|
## 已完成的优化
|
|||
|
|
|
|||
|
|
### 1. 图片压缩 ✅
|
|||
|
|
压缩了 10 张大图片（位于 `src/static/button/`）：
|
|||
|
|
|
|||
|
|
| 文件名 | 原始大小 | 压缩后 | 压缩率 |
|
|||
|
|
|--------|---------|--------|--------|
|
|||
|
|
| supervision.jpg | 4423KB | 139KB | 96.9% |
|
|||
|
|
| assessor.jpg | 4332KB | 137KB | 96.8% |
|
|||
|
|
| companion.jpg | 4328KB | 127KB | 97.1% |
|
|||
|
|
| study-tour.jpg | 4298KB | 136KB | 96.8% |
|
|||
|
|
| special.jpg | 4059KB | 134KB | 96.7% |
|
|||
|
|
| planner.jpg | 4041KB | 122KB | 97.0% |
|
|||
|
|
| summer-camp.jpg | 3964KB | 122KB | 96.9% |
|
|||
|
|
| interest.jpg | 3648KB | 155KB | 95.8% |
|
|||
|
|
| one-on-one.jpg | 3578KB | 161KB | 95.5% |
|
|||
|
|
| parent-academy.jpg | 2529KB | 102KB | 96.0% |
|
|||
|
|
|
|||
|
|
**总计**: 从 38MB 压缩到 1.3MB，节省 **36.7MB**
|
|||
|
|
|
|||
|
|
### 2. 当前代码包大小
|
|||
|
|
重新编译后的大小分布：
|
|||
|
|
|
|||
|
|
| 目录 | 大小 |
|
|||
|
|
|------|------|
|
|||
|
|
| static | 2.16MB |
|
|||
|
|
| pages | 0.69MB |
|
|||
|
|
| teacher-package | 0.60MB |
|
|||
|
|
| user-package | 0.45MB |
|
|||
|
|
| manager-package | 0.43MB |
|
|||
|
|
| provider-package | 0.34MB |
|
|||
|
|
| activity-package | 0.32MB |
|
|||
|
|
| 其他 | ~1MB |
|
|||
|
|
|
|||
|
|
**总计**: 约 **6MB**
|
|||
|
|
|
|||
|
|
## 问题分析
|
|||
|
|
|
|||
|
|
虽然图片已压缩，但代码包仍然是 **6MB**，超过主包 2MB 限制。
|
|||
|
|
|
|||
|
|
**根本原因**:
|
|||
|
|
- 项目使用了多个分包（teacher-package, user-package, manager-package 等）
|
|||
|
|
- 但这些分包可能没有正确配置为微信小程序的分包
|
|||
|
|
- 所有代码都被打包到主包中
|
|||
|
|
|
|||
|
|
## 解决方案
|
|||
|
|
|
|||
|
|
### 方案1: 配置分包加载（推荐）✅
|
|||
|
|
|
|||
|
|
微信小程序支持分包加载，主包 + 所有分包总大小不超过 20MB。
|
|||
|
|
|
|||
|
|
需要在 `src/pages.json` 中配置 `subPackages`：
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"pages": [
|
|||
|
|
// 主包页面（只保留首页、登录等核心页面）
|
|||
|
|
],
|
|||
|
|
"subPackages": [
|
|||
|
|
{
|
|||
|
|
"root": "teacher-package",
|
|||
|
|
"pages": [
|
|||
|
|
// 教师端页面
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"root": "user-package",
|
|||
|
|
"pages": [
|
|||
|
|
// 用户端页面
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"root": "manager-package",
|
|||
|
|
"pages": [
|
|||
|
|
// 管理师端页面
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"root": "provider-package",
|
|||
|
|
"pages": [
|
|||
|
|
// 服务商端页面
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 方案2: 进一步压缩图片
|
|||
|
|
|
|||
|
|
如果方案1不够，可以：
|
|||
|
|
- 将图片质量降低到 75
|
|||
|
|
- 将最大宽度降低到 800px
|
|||
|
|
- 使用 WebP 格式（需要兼容性检查）
|
|||
|
|
|
|||
|
|
### 方案3: 图片使用 CDN
|
|||
|
|
|
|||
|
|
将图片上传到服务器，使用网络图片而不是本地图片。
|
|||
|
|
|
|||
|
|
## 下一步操作
|
|||
|
|
|
|||
|
|
1. **检查 pages.json 配置** - 确认分包是否正确配置
|
|||
|
|
2. **如果没有配置分包** - 需要重新配置 pages.json
|
|||
|
|
3. **重新编译** - 配置后重新编译小程序
|
|||
|
|
4. **在微信开发者工具中上传** - 检查主包和分包大小
|
|||
|
|
|
|||
|
|
## 相关文件
|
|||
|
|
|
|||
|
|
- 压缩脚本: `Archive/[一次性]压缩图片-PowerShell-2026-01-31.ps1`
|
|||
|
|
- 编译脚本: `Archive/[一次性]重新编译小程序-图片压缩后-2026-01-31.bat`
|
|||
|
|
- 源图片目录: `peidu/uniapp/src/static/button/`
|
|||
|
|
- 编译输出: `peidu/uniapp/dist/dev/mp-weixin/`
|
|||
|
|
|
|||
|
|
## 时间记录
|
|||
|
|
|
|||
|
|
- 2026-01-31: 完成图片压缩，从 40MB 降到 6MB
|
|||
|
|
- 下一步: 配置分包加载
|