小程序分包

1.简介

• 我们在开发小程序的时候，经常回遇到一个情况就是，当小程序比较完整、功能比较完全的时候，会造成小程序包大小太大不能上传(小程序包大小限制在2M以内)。
• 当我们使用一些第三方组件或者大量images的时候，包的大小，很容易就会超过的，这个时候我们就可以使用分包的技术来实现包大小的限制
• 分包：
  • 小程序将包分为，主包、分包、独立分包三种
    • 主包：在app.json-->pages里面包含的page就是主包，以及包含app.js、app.wxss等公共文件
    • 分包：在app.json-->subpackages里面包含的page就是分包
    • 独立分包：在app.json-->subpackages里面包含的page就是分包，属性independent为true的分包
  • 分包也遵循小程序包的限制的，每个分包也是不能超过2M的，但是整个小程序是不可以超过16M的，是不是也有点淡淡的忧伤，但是比较与2M会好很多
• 使用分包以后，我们就可以将不同的模块使用一个分包，将公共的一些配置方式以及请求什么的写入主包，从而来释放主包的大小
• 缺点：
  • 分包用户第一次从主包跳进分包时候才开始下载，此时会有一定的延迟
    • 但也是可以使用分包预下载来避免，但是预下载也是有大小限制的2M，后面会详细介绍
  • 分包对主包依赖比较大，如果你需要打开分包，那么就会先下载主包，再下载分包，从而显示界面
    • 但是可以使用独立主包解决，但是独立主包实获取不到app实例,，因为此时主包并没有下载
• 微信分包文档

2.使用分包

我们可以在项目任意的路径下面创建我们的分包文件夹以及对应的page

• 当我们使用分包的时候，我们需要在app.json文件下面使用subpackages设置我们的分包信息

• "subpackages": [
    # 每个对象表示一个分包
      {
        "name": "packagesA",# 表示此分包的名称
        "root": "pages1/",# 分包的路径
        "pages": [# 分包里面包含的页面，
          "cat/index"
        ]
      },
      {
        "root": "pages2/",
        "pages": [
          "dog/index"
        ],
        "independent": true # 表示此包是否实独立分包
      }
    ]
  

  注意：root路径加上pages里面的页面路径刚好就是分包页面的路径不要写错

3.独立分包

当我们在分包的对象里面。将independent设置为true的分包，将是个主包

分包	独立分包
不可以单独发包，需要依赖与主包	可以单独，发包，不需要依赖与主包
可以在页面内，getApp() 会获取到app对象	不可以在页面内，获取到app对象，只有跳转到主包后，主包下载完成时，才能获取到app对象
可以引入主包的wxss样式	不可以使用主包的wxss样式

• 关于getApp

  • 因为独立主包不依赖于主包，所以我们通过getApp获取不到app对象，但是我们可以通过allowDefault = true设置一个默认值，当主包下载完成后，会将我们设置的数据同步到app对象里面

  • 独立分包

    const app = getApp({allowDefault : true})
    app.token = "123"
    

  • 主包

    const app = getApp()
    console.log(app.token) // 123
    

• 生命周期

  • 我们不可能在app.js，里面使用onLaunch、onShow方法监听小程序 的生命周期，但是我们可以使用wx.onAppHide、wx.onAppShow来监听

4.分包预加载

当我们使用分包来发布应用的时候，默认情况当第一次从主包跳转到分包页面时候，才会开始下载，这样就会给用户造成一个卡顿的现象。

如果想解决这样的问题，我们可以使用预加载，当用户加载到A界面的时候，我们可以再此时预下载分包的页面B，那么等用户跳转到页面B的时候会流畅很多

• 默认情况

  graph TD;
  主包A界面 --> Button --> 下载分包页面A --> 显示分包页面A
  

• 预加载

  graph TD;
  主包界面B --> 下载分包页面A
  主包界面B --> button按钮点击 --> 显示分包页面A
  

• 预加载使用，我们需要在app.js下面使用preloadRule配置预加载规则，预加载规则只支持配置的原则，不支持api调用配置

  "preloadRule": {
    # 当加载到pages/index/index页面的时候，在网络实wifi时会预加载packagesA包
      "pages/index/index": {
            "network": "wifi", # 网络环境时wifi时才会加载包packagesA
        "packages": ["packagesA"] # packages 预下载那个包，那个界面
      },
      "pages2/dog/index": {
        "packages": [""] #  表示主包
      }
    },
  

  注意：以上所有独立分包通过getApp获取app对象获取不到的前提为：没有加载过主包的情况下

• Demo app.json配置

{
  "pages": [
    "pages/index/index"
  ],
  "subpackages": [
    {
      "name": "packagesA",
      "root": "pages1/",
      "pages": [
        "cat/index"
      ]
    },
    {
      "root": "pages2/",
      "pages": [
        "dog/index"
      ],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "packages": ["packagesA"]
    },
    "pages2/dog/index": {
      "packages": [""]
    }
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• demo目录情况：

image.png