【详讲】微信小程序分包流程步骤

最新推荐文章于 2025-11-07 16:23:31 发布

原创

最新推荐文章于 2025-11-07 16:23:31 发布 · 2.6w 阅读

155 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #前端 #经验分享 #javascript

本文详细介绍了微信小程序的分包概念和操作流程，包括主包和分包的定义、配置方法、打包原则及引用规则。同时，重点讨论了独立分包的使用，如其启用方法、限制条件以及与主包的交互注意事项，强调了独立分包在启动速度和低版本兼容性方面的特点。

【详讲】微信小程序分包流程步骤

本文基于微信小程序的官方文档，对分包的概念以及具体的操作流程进行讲解。

一、为什么要使用分包？

主要原因就是微信小程序规定了主包大小不能超过 2M ，但我们随着开发的更新迭代，一个小程序往往是大于 2M 的。于是小程序提供了分包的解决方法，将一个完整的的小程序，在打包时分成不同功能或需求的分包，在用户使用时再加载对应的分包。

主包：使用分包后必须有一个主包，用于存放 TabBar 页面，以及一些公共的资源文件和JS脚本。

分包：从主包上拆分而来的文件，个人建议的的拆分方式：先根据 TabBar 页面拆分大的模块，再拆分每个 TabBar内具体的小功能模块，这样拆分管理起来也更加清晰明了。

目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过 20M
单个分包/主包大小不能超过 2M

二、使用分包

1、基本配置

我们先看看官方给出的目录结构和 app.josn 的配置：

目录结构

├── app.js
├── app.json---------分包配置文件
├── app.wxss
├── packageA---------分包A
│   └── pages
│       ├── cat
│       └── dog
├── packageB---------分包B
│   └── pages
│       ├── apple
│       └── banana
├── pages------------主包
│   ├── index
│   └── logs
└── utils

app.json 配置

{
     
     
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
     
     
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
     
     
      "root": "p