本文链接：https://blog.csdn.net/weixin_74217070/article/details/132893251

微信小程序写到最后即将上传发现主包大小要求不能超过1.5MB？

打开微信小程序官方文档查看如何分包发现也不是很理解？

网上寻找分包教程发现都是把官方文档复制过来根本没有实际性帮助？

这篇文章将详细讲解如何对微信小程序进行分包。

（这篇的分包方法可能不符合提高用户体验感的要求，但是可以让你基本学会如何进行分包，最主要的是，能够让小程序符合上传的要求）

打包需要注意的一些事情：

微信小程序要求整体大小不超过20MB，每个分包不超过1.5MB
用subpackages配置打包路径（具体如何配置见下文）
tabBar页面必须在主包内
ubpackage的根目录不能是另外一个ubpackage内的子目录

先附上官方文档对分包的讲解：

配置方法

假设支持分包的小程序目录结构如下：

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在 app.json subpackages（或subPackages）字段声明项目分包结构：


{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

具体内容在下面操作讲解中也会强调

subpackages中，每个分包有以下几项配置：

字段	类型	说明
root	String	分包根目录
name	String	分包别名，分包预下载时可以使用
pages	StringArray	分包页面路径，相对于分包根目录
independent	Boolean	分包是否是独立分包

打包原则

声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到主包中
主包也可以有自己的 pages，即最外层的 pages 字段。
subpackage 的根目录不能是另外一个 subpackage 内的子目录
tabBar 页面必须在主包内

引用原则

packageA 无法 require packageB JS 文件，但可以 require 主包、packageA 内的 JS 文件；使用分包异步化时不受此条限制
packageA 无法 import packageB 的 template，但可以 require 主包、packageA 内的 template
packageA 无法使用 packageB 的资源，但可以使用主包、packageA 内的资源

低版本兼容

由微信后台编译来处理旧版本客户端的兼容，后台会编译两份代码包，一份是分包后代码，另外一份是整包的兼容代码。新客户端用分包，老客户端还是用的整包，完整包会把各个 subpackage 里面的路径放到 pages 中。

下面我将以此目录为例具体讲解如何分包

如图所示，pages下有index、logs、page_1、page_2、page_3、page_4六个页面。我将把index和logs页面放在主包中（具体哪些东西放在主包中可根据需求和内容大小进行调整），page_1、page_2、page_3、page_4四个页面分别放到四个包中。

在app.json中声明subpackages

  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "subpackages":[
    {
      "root":"packageA", //分包的根路径，彼此之间不可以重复
      "name":"pack1",  	//分包的标识名字，用于预加载分包时用
      "pages":[			//分包的路径（不预加载的时候，用户进入分包路径才会加载分包资源）
        "pages/page_1/page_1"
      ],
      "independent":false   //是否独立分包（可以不加载主包就独立加载的包，独立分包不能当做全局资源）
    },
    {
      "root":"packageB",
      "name":"pack2",
      "pages":[
        "pages/page_2/page_2"
      ],
      "independent":false
    }
  ],