162 lines
4.9 KiB
Markdown
162 lines
4.9 KiB
Markdown
# 主包体积进一步优化方案
|
||
|
||
## 当前状态
|
||
- **优化前主包体积**: 2.74MB
|
||
- **第一次优化后**: 2.19MB (已减少 550KB)
|
||
- **目标**: < 1.5MB
|
||
- **还需减少**: 约 690KB
|
||
|
||
## 已完成的优化 ✅
|
||
|
||
### 1. 删除未使用的大文件 (868KB)
|
||
- ✅ `uni_modules/lime-echart/static/echarts.min.js` (567KB)
|
||
- ✅ `lib/lunar-javascript@1.7.2.js` (301KB)
|
||
|
||
### 2. 移动 train 图片到分包 (预计 400-500KB)
|
||
- ✅ 将 `static/images/train/` 目录移到 `packageB/static/images/train/`
|
||
- ✅ 更新所有引用路径
|
||
|
||
**已减少总计**: 约 1.27MB - 1.37MB
|
||
|
||
## 进一步优化建议
|
||
|
||
### 方案一：优化图片资源（预计减少 200-300KB）
|
||
|
||
#### 1.1 压缩主包中的大图片
|
||
需要压缩的图片文件：
|
||
- `static/icon/background2.png` - 检查大小
|
||
- `static/imgs/avatar.jpg` (48KB) → 目标: <25KB
|
||
- `static/imgs/fristEntry.png` - 检查大小
|
||
- 其他 `static/icon/` 目录下的图片
|
||
|
||
**工具推荐**:
|
||
- [TinyPNG](https://tinypng.com/) - PNG压缩
|
||
- [Squoosh](https://squoosh.app/) - 在线图片压缩
|
||
- [ImageOptim](https://imageoptim.com/) - 批量压缩
|
||
|
||
#### 1.2 将非首屏必需图片移到分包
|
||
- 将 `static/imgs/` 目录移到分包（如果只在特定页面使用）
|
||
- 检查 `static/icon/` 中哪些图标可以移到分包
|
||
|
||
### 方案二：优化 Markdown 相关库（预计减少 296KB）
|
||
|
||
#### 2.1 当前情况
|
||
- `lib/highlight/highlight-uni.min.js`: 203KB
|
||
- `lib/markdown-it.min.js`: 93KB
|
||
- 总计: 296KB
|
||
|
||
#### 2.2 使用范围
|
||
- 主包: `pages/chat/chat.vue` (主包页面)
|
||
- 分包: `packageA/pages/moreJobs/moreJobs.vue`
|
||
- 组件: `components/md-render/md-render.vue`
|
||
- Store: `stores/userChatGroupStore.js`
|
||
|
||
#### 2.3 优化方案
|
||
**方案A**: 将 chat 页面移到独立分包（推荐）
|
||
- 创建新分包 `packageChat`
|
||
- 将 `pages/chat/` 移到分包
|
||
- 将 markdown 相关库移到分包
|
||
- **预计减少**: 296KB + chat页面代码体积
|
||
|
||
**方案B**: 使用更轻量的代码高亮库
|
||
- 替换 `highlight-uni.min.js` 为更轻量的库
|
||
- 或移除代码高亮功能（如果非必需）
|
||
|
||
**方案C**: 按需加载
|
||
- 使用动态 import 按需加载 markdown 库
|
||
- 只在需要时加载
|
||
|
||
### 方案三：检查并优化 components 目录
|
||
|
||
#### 3.1 检查组件使用情况
|
||
需要检查的组件：
|
||
- `components/md-render/` - 如果只在 chat 使用，可移到分包
|
||
- `components/area-cascade-picker/` - 检查使用范围
|
||
- 其他大型组件
|
||
|
||
#### 3.2 优化策略
|
||
- 将只在分包使用的组件移到对应分包
|
||
- 将大型组件按需加载
|
||
|
||
### 方案四：检查 pages 目录
|
||
|
||
#### 4.1 可以移到分包的页面
|
||
检查以下页面是否可以移到分包：
|
||
- `pages/complete-info/` - 补全信息相关（可能可以移到 packageA）
|
||
- `pages/job/` - 发布岗位相关（可能可以移到 packageA）
|
||
- `pages/demo/` - 演示页面（可以删除或移到测试分包）
|
||
|
||
#### 4.2 优化策略
|
||
- 将非核心功能页面移到分包
|
||
- 删除测试/演示页面
|
||
|
||
### 方案五：清理未使用的 uni_modules
|
||
|
||
#### 5.1 检查列表
|
||
检查以下模块是否在主包使用：
|
||
- `custom-waterfalls-flow`
|
||
- `uni-data-select`
|
||
- `uni-dateformat`
|
||
- `uni-load-more`
|
||
- `uni-popup`
|
||
- `uni-steps`
|
||
- `uni-swipe-action`
|
||
- `uni-transition`
|
||
|
||
#### 5.2 优化策略
|
||
- 如果只在分包使用，可以考虑移除主包引用
|
||
- 使用 `easycom` 配置确保组件能正确加载
|
||
|
||
### 方案六：优化 common 目录
|
||
|
||
#### 6.1 检查文件
|
||
- `common/vendor.js` - 如果存在，检查是否可以优化
|
||
- `common/globalFunction.js` - 检查是否可以拆分
|
||
- 其他 common 文件
|
||
|
||
## 推荐执行顺序
|
||
|
||
### 优先级1：立即执行（预计减少 300-400KB）
|
||
1. ✅ 压缩主包中的大图片
|
||
2. ✅ 将 `pages/demo/` 删除或移到测试分包
|
||
3. ✅ 检查并清理未使用的 uni_modules
|
||
|
||
### 优先级2：中期执行（预计减少 296KB）
|
||
1. 将 chat 页面移到独立分包（推荐方案A）
|
||
2. 或使用更轻量的代码高亮库（方案B）
|
||
|
||
### 优先级3：长期优化
|
||
1. 优化 components 目录
|
||
2. 优化 pages 目录结构
|
||
3. 优化 common 目录
|
||
|
||
## 预期效果
|
||
|
||
| 优化项 | 预计减少 | 优先级 |
|
||
|--------|---------|--------|
|
||
| 压缩图片 | 200-300KB | 🔴 高 |
|
||
| 移动 chat 页面到分包 | 296KB+ | 🔴 高 |
|
||
| 删除 demo 页面 | 50-100KB | 🟡 中 |
|
||
| 清理 uni_modules | 100-200KB | 🟡 中 |
|
||
| 优化 components | 50-150KB | 🟢 低 |
|
||
|
||
**总计预计减少**: 696KB - 1046KB
|
||
|
||
**优化后主包体积**: 约 1.14MB - 1.49MB ✅
|
||
|
||
## 注意事项
|
||
|
||
1. **备份**: 在执行优化前，请先备份项目
|
||
2. **测试**: 每个优化步骤后都要进行完整测试
|
||
3. **引用路径**: 确保所有文件引用路径正确更新
|
||
4. **分包限制**: 注意微信小程序分包大小限制（单个分包不超过 2MB）
|
||
5. **主包限制**: 主包大小必须控制在 1.5MB 以内
|
||
|
||
## 验证方法
|
||
|
||
1. 使用微信开发者工具上传代码，查看主包体积
|
||
2. 使用代码依赖分析工具验证优化效果
|
||
3. 测试各个功能模块确保正常工作
|
||
4. 检查分包加载是否正常
|
||
|