微信小程序在打包发布时，压缩主包大小

消逝的时光@Z

于 2025-04-17 17:35:38 发布

阅读量849

点赞数 16

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_43944291/article/details/147310567

版权

微信小程序在打包发布时，压缩主包大小是非常关键的操作，因为主包体积有限制（2M 内），超过就无法上传或运行。

📦 小程序打包机制简要说明

✔️ 微信小程序打包规则：

主包页面引用的组件，无论路径在不在分包目录，都会打入主包。
分包页面引用的组件，只会打入该分包中。
多个分包引用的组件，每个分包中都会包含一份副本（不能共享）。
只有主包/某个分包引用时，组件只会打进被引用的地方。

打包构建成 `unpackage/dist/build/mp-weixin`

✅ 方法一：使用 HBuilderX 打包

步骤：

打开 HBuilderX，加载你的项目。
菜单栏选择：发行 → 小程序平台 → 微信小程序
弹出窗口中，选择：
- 目标平台：微信小程序
- 是否开启压缩/混淆：根据需要勾选
点击发行

✅ 构建成功后，会在项目中生成目录：

swift

复制编辑

unpackage/dist/build/mp-weixin/

该目录就是完整的小程序构建产物，可供上传使用。

以下是压缩主包体积的常用方法和完整流程👇：

✅ 一、基础策略

1️⃣ 开启 `lazyCodeLoading`（代码懒加载）

// 在 pages.json 根级添加
"lazyCodeLoading": "requiredComponents"

作用：
👉 只有页面使用的组件才会被打包进去，未用到的组件不会编译打包，从而大大减少体积。

2️⃣ 使用 `easycom` + 自动按需加载组件

// pages.json 中配置
"easycom": {
  "autoscan": true,
  "custom": {
    "^u-(.*)": "uni_modules/uview-ui/components/u-$1/u-$1.vue",
    "^z-(.*)": "uni_modules/z-paging/components/z-$1/z-$1.vue"
  }
}

作用：
✅ 组件按使用加载，不会全量打包进主包。

3️⃣ 拆分页面为分包（推荐）

"subPackages": [
  {
    "root": "subpkg",
    "pages": [
      { "path": "index" }
    ]
  }
]

主包只保留少量页面（如首页、登录页）
其余页面全部拆成多个 subPackages
分包 单独加载、独立打包

✅ 二、资源优化

4️⃣ 删除未使用的资源文件（尤其是）

图片 (.png, .jpg)
视频、音频
字体文件
库文件中未使用部分

使用 HBuilderX 的文件体积预览可快速识别大文件 🔍

5️⃣ 使用 `base64` 小图（<10kb）

对于小图标，可以转成 base64 放到 CSS 或 Vue 里，减少请求 & 文件体积：

background-image: url('data:image/png;base64,...')

6️⃣ 压缩图片

使用 TinyPNG 或脚本批量压缩
不透明背景优先用 .jpg
大图尽量 CDN 加载，或延迟加载

✅ 三、组件优化

7️⃣ 不在主包使用大组件（如 uView、z-paging）

如果主包页面引用了大型组件，它就会被打包进主包！
所以：
- 大组件尽量在分包使用
- 公共组件如需共享，考虑转为插件或 uni_modules 统一管理

8️⃣ 使用组件独立分包（进阶）

微信不支持多个分包共享组件，所以可以用“公共分包”技巧或插件分包：

"subPackages": [
  {
    "root": "common-subpkg",
    "name": "common",
    "independent": true,
    "pages": []
  }
]

并通过 easycom 指向该分包路径（避免主包引用）。

✅ 四、配置建议（pages.json）

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uni_modules/uview-ui/components/u-$1/u-$1.vue",
      "^z-(.*)": "uni_modules/z-paging/components/z-$1/z-$1.vue"
    }
  },
  "lazyCodeLoading": "requiredComponents"
}

✅ 五、查看包大小工具

HBuilderX → 打包预览 → 小程序预览编译结果
打包路径： unpackage/dist/build/mp-weixin/
查看 __APP__.WXSS, app-service.js 等体积

🔥 Bonus：主包压缩建议表

项目	是否推荐	说明
组件按需引入	✅	配合 lazyCodeLoading、easycom
删除未用组件	✅	删除冗余组件
图片压缩	✅	小图 base64，大图 CDN
使用分包	✅	分散体积、加快主包加载
主包只保留关键页面	✅	首页、登录页足矣
使用插件分包（进阶）	✅	公共组件共享利器
引入 SDK 只用必要模块	✅	不要整包导入