小程序分包以及分包页面的分享

最新推荐文章于 2024-10-06 22:47:16 发布

ZhaoYulin6

最新推荐文章于 2024-10-06 22:47:16 发布

阅读量958

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序 javascript

本文链接：https://blog.csdn.net/ZhaoYulin6/article/details/112278258

微信小程序专栏收录该内容

9 篇文章

订阅专栏

本文介绍了小程序分包的原因、步骤及预下载机制。分包允许整个小程序不超过8M，单个分包不超过2M。启动时默认下载主包，进入分包页面时客户端会下载对应分包。分包支持的基础库版本为2.3.0以上，预下载配置在app.json的preloadRule字段。独立分包在6.7.2及以上版本支持，可提升分包页面启动速度，无需下载主包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.分包

为什么使用分包
小程序第一版推出小程序代码包不能超过1MB 大小，所以，小程序可以秒开，但是随着业务的发展，又推出整个小程序所有分包大小不超过 8M，而8M不能秒开，于是就推出分包加载。

对于小程序而言

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

在小程序启动时，默认会下载主包并启动主包内页面
当用户用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

分包支持的版本
微信客户端6.6.0，基础库 1.7.3 及以上版本开始支持。开发者工具请使用 1.01.1712150 及以上版本
转载：https://www.jianshu.com/p/e51316e15a6a

2.小程序的分包步骤

step1：
添加项目目录

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

step2：
在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"
      ]
    }
  ]
}

}
step3：
分包配置
subpackages里面的配置项包括

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

打包规则

1.声明 subpackages 后，将按 subpackages 配置路径进行打包，2.subpackages 配置路径将作为分包打包，其他都被打包到 app（主包）中
3.app（主包）也可以有自己的 pages（即最外层的 pages 字段）
4.subpackage 的根目录不能是另外一个 subpackage 内的子目录
5.tabBar 页面必须在 app（主包）内
6.每个分包都可以使用自己分包内的资源以及引用require app里面的资源，但是分包与分包之间，都是不可通信的，分包与主包下的pages里面的内容也是不可通信的(这一点有待考证)

分包预下载

基础库 2.3.0 开始支持，低版本需做兼容处理。开发者工具请使用 1.02.1808300 及以上版本，可点此下载。
目前只支持通过配置方式使用，暂不支持通过调用API完成

通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

配置方法
在app.json中增加 preloadRule 配置来控制。

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}

以上配置

key 是页面路径，value 是进入此页面的预下载配置

packages的 value是StringArray 类型，表示进入页面后预下载分包的 root 或 name。APP 表示主包

network 是string类型默认为 ‘wifi’ ，标识在指定网络下预下载，
可选值为
all: 不限网络
wifi: 仅wifi下预下载

同一个分包中的页面享有共同的预下载大小限额 2M(一个分包内的所有页面加总只有2M预下载)，限额会在工具中打包时校验。

独立分包

小程序游戏不支持独立分包。

微信客户端 6.7.2，基础库 2.3.0 及以上版本开始支持。开发者工具请使用 1.02.1808300 及以上版本，可点此下载。

1.从独立分包中页面进入小程序时，不需要下载主包。
2.从普通的分包页面进入小程序时，首先下载主包；

优势：提升分包页面的启动速度。

配置方法
app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleA",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true
    }
  ]
}