小程序的 7 个优化技巧：主包体积从 2M 压缩至 500KB ！

随着小程序不断地更新迭代，2M 的主包体积上限基本就不够用了。正确利用分包加载机制能够突破小程序的体积上限，提升用户的使用体验。

小程序的包体积的限制：

• 主包：<= 2M
• 单个分包：<= 2M
• 总包：<= 20M

本文将结合微信官方文档规则，深入解析这 7 个分包优化小技巧，帮你对主包体积压缩至 500 KB 以下。

✅ 技巧 1：图片瘦身

这无疑是最大程度减小代码体积的有效途径之一：

• 本地图片、图标，压缩率通常可达 80%以上
• 展示类图片直接放 OSS

压缩工具推荐：TinyPNG

✅ 技巧 2：移除“僵尸代码”

清理项目中过期的页面、组件、JS、CSS，这部分“僵尸代码”不可小觑，往往都会占据 10% ~ 30% 不等的体积。

借助微信开发者工具的代码静态依赖分析功能，查看代码包到文件结构与依赖关系，移除无用代码资源。

✅ 技巧 3：按需注入

• 仅注入当前访问页面所需要的自定义组件和页面代码。

// app.json 配置示例
{
  "lazyCodeLoading": "requiredComponents"
}

• 合理利用代码的Tree Shaking能力，避免全量引入模块代码。

✅ 技巧 4：分包预加载

在当前页面，自动预加载“可能要用到的分包”，提升后续分包页面的启动速度。

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

上面代码表示：在进入pages/index页面时预加载important分包。

✅ 技巧 5：独立分包

将广告页、活动页、支付页等低频、且比较独立的模块，强烈建议使用独立分包。

{
  "subPackages": [
    {
      "root": "activity",
      "pages": ["pages/pineapple"],
      "independent": true // 关键参数！
    }
  ]
}

优势：可“直接使用”，不需要加载主包资源。

✅ 技巧 6：避免全局自定义组件

全局引用的组件和插件，会包含在主包中，增加主包体积，同时也会影响启动耗时。

建议：应尽量避免使用全局的自定义组件或插件。

✅ 技巧 7：开启上传时压缩

在开发者工具中勾选：

详情 → 本地设置 → 上传时自动压缩

开启后：将再度减少小程序的代码体积。

总结

通过以上 7 个优化技巧，将主包体积优化至 500 KB 是完全可行的。

关键在于：合理利用微信小程序的分包机制，再结合其他方面的优化，再复杂的小程序也能控制好主包体积，保证启动速度。