用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

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

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

Rolan 2021-2-22 22:30

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

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

一、为什么要分包?

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

二、分包大小限制

在微信开发工具的详情->项目配置中可以看到,如果不采用分包,小程序总大小不能超过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.jsonsubpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包

  1. {
  2. "subPackages": [
  3. {
  4. "root": "packages/familyPackage",
  5. "pages": [
  6. "pages/familyList/familyList"
  7. ]
  8. },
  9. {
  10. "root": "packages/intelligentPackage",
  11. "pages": [
  12. "pages/manual/manual",
  13. "pages/automatic/automatic"
  14. ],
  15. "independent": true
  16. }
  17. ],
  18. }

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.onAppShowwx.onAppHide 完成。App 上的其他事件可以使用 wx.onErrorwx.onPageNotFound 监听。

四、分包预下载

1)通过在 app.json 增加 preloadRule 配置来控制,packages为数组,即可配置多项, 如果配置为  _APP_ 表示预加载主包,需要预加载主包的场景为从独立分包进入 主包或常规分包

   

2)效果   

 

3)注意事项

同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。

如,页面 A 和 B 都在同一个分包中,A 中预下载总大小 0.5M 的分包,B中最多只能预下载总大小 1.5M 的分包。

4)特点

   a、在加载当前包的时候可以设置预下载其他的包;

   b、缩短用户等待时间,提高用户体验;

五,查看各包大小

在项目的详情->基本信息 本地代码中可以看到主包及各个包的大小

 全文到这里结束啦!

ps:学习成长过程的简单记录,如有不严谨之处,欢迎交流!

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏