msh-system/msh_single_uniapp/documents/微信主包体积优化.md

微信小程序主包体积优化说明

错误说明

• 报错：main package source size 2542KB exceed max limit 2048KB
• 含义：主包代码体积 2542KB，超过微信规定的 2MB（2048KB）上限，无法上传。

主包与分包

• 主包：pages.json 里 pages 数组中的页面及其直接间接依赖（组件、公共 JS、static 等）都会打进主包。
• 分包：subPackages 下的页面单独打成一个或多个分包，不占主包体积；用户进入分包页时才下载对应分包。
• 限制：主包 ≤ 2MB，单个分包 ≤ 2MB，总包 ≤ 20MB。

已做优化（本次）

1. 商品分类改为分包（约可减少主包 100KB+）

• 原状：pages/goods_cate/goods_cate 在主包中，且带多个子组件（optimization、fresh、contracted、default_cate），体积较大。
• 调整：在 pages.json 中新增分包 goods_cate，将 pages/goods_cate/goods_cate 移入该分包。
• 结果：跳转路径仍为 /pages/goods_cate/goods_cate，无需改业务代码；该页及其独有组件不再占用主包。

2. 关闭生产环境 SourceMap

• 在 vue.config.js 中设置 productionSourceMap: false，减小构建产物体积。

3. 主包体积分析脚本

• 位置：scripts/analyze-mp-main.js
• 用法：先对微信小程序做发行构建，再在项目根目录执行：

  node scripts/analyze-mp-main.js
  

• 作用：根据构建后的 app.json 识别分包，只统计主包文件，输出主包总大小及主包内大文件列表，便于后续优化。

若主包仍超 2MB 可继续做的优化

1. 静态资源

   • static/ 下图片（如 tabBar 图标、大图）压缩或改用 CDN，仅保留必要的小图在主包。
   • 非 tabBar 必需的大图可放 CDN，页面内用网络地址引用。

2. 公共 JS（common/vendor.js）

   • 主包页面尽量少引大库（如富文本、加解密、大 UI 库）；只在分包页或按需引入。
   • 已启用 lazyCodeLoading: "requiredComponents"（manifest.json）时，注意主包首屏用到的组件不要拖入过重依赖。

3. 主包页面与组件

   • 主包仅保留：启动页 + tabBar 页（如 tool_main/index、tool_main/community、index、user 等）及订单车等高频页。
   • 非 tab 且非首屏必需的页面，尽量放入 subPackages。
   • 首页用到的 homeIndex 等组件较多时，可考虑按需异步组件或拆分首屏与二屏逻辑，减少首包体积。

4. 构建

   • 确认发行时已压缩（manifest 中微信小程序 minified: true）。
   • 生产环境已去掉 console（当前 vue.config.js 已配置 drop_console）。

查看文件列表与依赖

• 主包文件列表与体积：运行 node scripts/analyze-mp-main.js 查看。
• 代码依赖：在微信开发者工具中上传代码后，在「详情 → 本地设置」可勾选「上传时代码依赖分析」，上传时会给出依赖与体积提示；也可在「代码依赖分析」面板查看各包包含的页面与文件。

重新发行并上传前，请先重新发行构建微信小程序，再执行 node scripts/analyze-mp-main.js 确认主包已低于 2048KB。分析脚本会优先使用构建产物中的 app.json，并参考源码 pages.json 中的分包配置以兼容未重新构建时的估算。