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，需要保留或按需加载

操作步骤:

# 检查主包中是否有页面使用 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 - PNG压缩
• Squoosh - 在线图片压缩
• ImageOptim - 批量压缩

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 中配置分包预加载，优化用户体验：

{
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["packageA"]
    }
  }
}

5.2 动态导入大型库

对于只在特定场景使用的大型库，使用动态导入：

// 示例：按需加载 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. 代码审查: 在代码审查时关注主包体积变化