221 lines
6.7 KiB
Markdown
221 lines
6.7 KiB
Markdown
# 微信小程序主包体积优化方案
|
||
|
||
## 当前主包体积分析
|
||
|
||
根据代码依赖分析图，主包体积为 **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`
|
||
2. ✅ 删除主包中未使用的 `lunar-javascript@1.7.2.js`
|
||
3. ✅ 验证分包中的文件引用正确
|
||
|
||
### 第二阶段：图片优化（预计减少 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. **代码审查**: 在代码审查时关注主包体积变化
|
||
|