小程序图片资源过多导致包体积超标，最推荐的处理方向是将图片迁移至 CDN 托管并使用分包加载，适用场景为主包体积接近或超过 2MB 限制，风险边界在于需确保 CDN 稳定性及处理网络请求权限配置。
先说结论：解决包体积超标需优先剥离非核心图片资源至云端，配合分包策略降低主包压力。
- 先定位：使用开发者工具分析具体占用资源
- 先做：优先迁移大图至云端，保留必要本地资源
- 再验证：真机预览确认加载速度与体积达标
命令速用版
若无自动化脚本，可按以下快速处理思路操作：
- 打开微信开发者工具，点击菜单栏「工具」>「大小分析」。
- 导出资源占用报告，筛选体积最大的前 10 张图片。
- 将筛选出的图片上传至对象存储（如腾讯云 COS、阿里云 OSS），获取 CDN 链接。
- 修改代码中图片路径，从本地相对路径改为网络 URL。
- 在微信公众平台配置域名白名单，确保 request 合法。
为什么会这样
主包体积限制是硬性约束，图片资源通常占用空间最大。微信小程序主包体积上限为 2MB，总包体积上限通常为 20MB（可通过分包扩展），但首屏加载依赖主包资源。图片文件未经压缩或格式老旧（如 PNG 未优化）会迅速耗尽主包配额，导致无法上传代码或首屏加载缓慢。将图片移至 CDN 可直接减少本地打包文件数量，分包加载则能延迟非首屏资源的加载时机。
分步处理
步骤一：分析资源占用
在开发者工具中运行项目，打开「大小分析」面板。查看「大包预警」或「资源排行」，记录占用超过 50KB 的单张图片路径。若发现单张图片超过 100KB 且非启动必需，标记为待迁移资源。
步骤二：迁移至 CDN 托管
将标记的图片上传至云存储服务。修改代码引用方式，例如将 src="/images/banner.png" 改为 src="https://cdn.example.com/images/banner.png"。注意需在微信公众平台「开发」>「开发管理」>「开发设置」中配置服务器域名，将 CDN 域名加入 request 合法域名列表。
步骤三：剩余图片压缩优化
对于必须保留在本地的图标或小图，使用 WebP 格式替代 PNG/JPG。在构建流程中集成图片压缩工具（如 imagemin），设置质量参数为 80% 左右。修改 wxml 中的引用，确保路径正确。
步骤四：配置分包加载
若整体资源仍超标，在 app.json 中配置 subPackages 字段。将非首屏页面的图片资源移至分包目录下。确保主包仅包含启动页和核心逻辑资源。
怎么验证是否生效
完成优化后，在开发者工具点击「编译」，观察控制台是否报错域名未配置。打开「大小分析」面板，确认主包体积降至 2MB 以下。使用真机预览功能，观察首屏图片加载速度，检查网络面板中图片请求是否走 CDN 链路且状态码为 200。
常见坑
- CDN 域名未配置：未在后台配置合法域名会导致真机请求失败，开发工具可能忽略此限制。
- 本地路径硬编码：迁移后代码中仍残留本地路径引用，导致部分环境显示空白。
- WebP 兼容性：虽主流机型支持 WebP，但部分老旧 Android 机型可能无法显示，需准备降级方案。
- 分包依赖错误：主包引用了分包内的图片资源，会导致主包体积未实际减小。
常见问题
主包体积限制具体是多少？
微信小程序主包体积限制通常为 2MB，总包体积限制通常为 20MB，具体数值以官方最新文档为准。
所有图片都能迁移到 CDN 吗？
大部分业务图片可以迁移，但启动页背景、TabBar 图标等核心资源建议保留本地以确保首屏稳定性。
使用 WebP 格式需要额外配置吗？
代码引用方式不变，但需确保构建工具支持转换，且服务端 CDN 需正确配置 MIME 类型。
参考来源
- 微信公众平台 - 小程序分包加载：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html
- 微信公众平台 - 小程序性能优化指南：https://developers.weixin.qq.com/miniprogram/dev/framework/performance/size.html