小程序社区 › 首页 › 教程› 实战教程 › 查看内容

微信小程序实现常规分包、独立分包和分包预下载

Rolan 2021-2-22 22:30

106

在分包功能出来之前，小程序代码体积不能超过2M，无法满足部分业务需求,尤其是图片较多的商城类小程序，经过微信小程序版本的迭代，分包加载应运而生 ...

在分包功能出来之前，小程序代码体积不能超过2M，无法满足部分业务需求,尤其是图片较多的商城类小程序，经过微信小程序版本的迭代，分包加载应运而生

一、为什么要分包？

小程序要求压缩包体积不能大于2M，否则无法编译发布；
在实际项目中，体积大于2M时就需要通过分包机制进行发布上传；
对小程序进行分包，可以优化小程序首次启动的下载时间，因为分包后主包体积小了，有效提高用户体验；
将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载，提高了程序性能；

二、分包大小限制

在微信开发工具的详情->项目配置中可以看到，如果不采用分包，小程序总大小不能超过2M，如果采取分包，总大小可以达到20M,但主包和单个分包的体积不能超过2M。

三、分包形式

1、常规分包

1）通过在 app.json subpackages 字段声明项目分包结构，配置如下：

2）app.json文件

分包的文件可以放在page里面，但我为了分包代码和主包代码在目录上有更好的区分，所以在pages同级新建了packages文件夹单独放分包的代码，名称和目录位置可以根据自己的需要确定。

3）跳转至分包页面，注意路径

wx.navigateTo({url: '/packages/familyPackage/pages/familyList/familyList'})

4）特点

a、加载小程序时，先加载主包，当需要访问分包页面时才加载分包；

b、分包可以访问主包的内容，包括但不限于文件、数据、图片等内容，可以理解为分包不分家；

2、独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。一个小程序中可以有多个独立分包。常见应用场景为：临时加的广告也或活动页面

1）通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包


{
 "subPackages": [
    {
      "root": "packages/familyPackage",
      "pages": [
        "pages/familyList/familyList"
      ]
    },
    {
      "root": "packages/intelligentPackage",
      "pages": [
        "pages/manual/manual",
        "pages/automatic/automatic"
      ],
      "independent": true
    }
  ],
}

2）特点

a、从独立分包中页面进入小程序时，不需要先下载主包（常规分包需要先下载主包）；

b、独立分包不能依赖其他包的内容，可以理解为独立的个体，但是可以从独立分包页面跳转至主包或常规分包页面的；

c、独立分包中不能定义 App，会造成无法预期的行为；同时独立分包中暂时不支持使用插件；

3）注意事项

a、独立分包运行时，假设用户没有进入过普通分包或主包内页面，这时 App 未被注册，因此 getApp() 无法获得 App 对象，由于这一限制，开发者无法通过 App 对象实现独立分包和小程序其他部分的全局变量共享。为了在独立分包中满足这一需求，基础库 2.2.4 版本开始 getApp支持 [allowDefault]参数，在 App 未定义时返回一个默认实现。当主包加载，App 被注册时，默认实现中定义的属性会被覆盖合并到真正的 App 中。

4）低版本兼容

在低于6.7.2版本的微信中运行时，独立分包视为普通分包处理，不具备独立运行的特性。在兼容模式下，主包中的 app.wxss 可能会对独立分包中的页面产生影响，因此应避免在独立分包页面中使用 app.wxss 中的样式。

5）关于 App 生命周期

当从独立分包启动小程序时，主包中 App 的 onLaunch 和首次 onShow 会在从独立分包页面首次进入主包或其他普通分包页面时调用。由于独立分包中无法定义 App，小程序生命周期的监听可以使用 wx.onAppShow，wx.onAppHide 完成。App 上的其他事件可以使用 wx.onError，wx.onPageNotFound 监听。