微信小程序分包

最新推荐文章于 2025-05-15 15:43:53 发布

原创最新推荐文章于 2025-05-15 15:43:53 发布 · 639 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

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

4 篇文章

订阅专栏

文章介绍了微信小程序的分包机制，包括如何在app.json中配置分包，以及独立分包的概念，它允许页面不依赖主包独立运行，提高启动速度。此外，文章还提及了分包预下载功能，可以在特定网络环境下预先加载指定分包，以提升用户体验。

文档地址：使用分包 | 微信开放文档

当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

目的：为了加载速度

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

1、整个小程序所有分包大小不超过 20M

2、单个分包/主包大小不能超过 2M

1、分包的使用

app.json

// 数组中 每一个对象对应着每一个分包
  "subPackages": [
    {
    // root 代表分包名称
      "root": "pakA",
    // 单独起名
      "name": "pA",
    // 分包内的内容
      "pages":[
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root": "pakB",
      "name": "pB",
      "pages": [
        "pages/apple/apple",
        "pages/banana/banana"
      ],
    // 启用独立分包，可以独立运行
      "independent": true
    }
  ],

2、独立分包

从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。

独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。

添加："independent": true 启用独立分包

3、分包预下载

在app.js 中设置配置项，如果分包设置了name 那么在packages 中可以设置 name的值

  "preloadRule": {
    // 加载message 页面时
    "pages/message/message":{
    // 只有在wifi情况下才预加载
      "network": "wifi",
    // 预加载的包名
      "packages": ["pA"]
    }
  },