ks-app-employment-service/docs/主包体积优化方案.md

# 微信小程序主包体积优化方案

## 当前主包体积分析

根据代码依赖分析图，主包体积为 **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. **代码审查**: 在代码审查时关注主包体积变化