删除无用json
This commit is contained in:
220
docs/主包体积优化方案.md
Normal file
220
docs/主包体积优化方案.md
Normal file
@@ -0,0 +1,220 @@
|
||||
# 微信小程序主包体积优化方案
|
||||
|
||||
## 当前主包体积分析
|
||||
|
||||
根据代码依赖分析图,主包体积为 **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. **代码审查**: 在代码审查时关注主包体积变化
|
||||
|
||||
Reference in New Issue
Block a user