60 lines
3.3 KiB
Markdown
60 lines
3.3 KiB
Markdown
|
# 微信小程序主包体积优化说明
|
|||
|
|
|
|||
|
|
## 错误说明
|
|||
|
|
|
|||
|
|
- **报错**：`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`
|
|||
|
|
- **用法**：先对微信小程序做**发行构建**，再在项目根目录执行：
|
|||
|
|
```bash
|
|||
|
|
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` 中的分包配置以兼容未重新构建时的估算。
|