跳到主要内容

小程序分包流程

在小程序 -> 版本管理 -> 代码依赖分析 (可以看到主包、分包的大小)

虽然分包被独立分开出去了，但是主包的东西还能用哦

  • 主包里的资源都是全局的，可以被公用
  • 主包页面 不能引用分包的页面
    • 万一分包东西体积过大，主包内容 引用分包的话，会造成体积太大
    • 而且分包的内容是按需加载的，如果主包引入 分包的话，会出现错误

为什么要分包​

随着业务量加大，小程序包的体积可能越来越大

  • 小程序要求压缩包的体积不能大于2M, 否则无法发布
  • 实际开发中小程序体积如果大于2M就需要使用分包机制
  • 分包后可解决2M的限制，并且能分包加载内容，提高性能
  • 用户在使用时才按需加载分包，即可以优化小程序的首次启动的时间

注意：

  • 整个小程序所有分包大小不超过16M 【所有包大小不超过16M】
  • 单个分包/主包大小不能超过2M 【每个包的大小不超过2M】

分包的形式​

  • 常规分包

  • 独立分包

  • 分包预下载

使用分包【常规分包】​

在app.json，subPackages字段声明项目分包结构

分包后，路径跳转注意【跳转到分页的页面】：需要匹配上分包的根目录

  • wx.navigateTo({url:'/分包的根目录/xxxxx/xxx'}), 如 ：
  • wx.navigateTo({url:'/packageA/pages/cat'})
json
"subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB", // 分包的根目录
      "name": "pack2", // 分包的包名
      "pages": [  // 分包的页面
        "pages/apple",
        "pages/banana"
      ]
    }
  ]

特点：

  • 加载小程序的时候先加载主包，当需要访问分包的页面的时候才会加载分包内容
  • 分包的页面可以访问主包的文件，数据、图片、图标iconfont等资源
  • 主包
    • 主包来源，处理分包以外的内容都会打包到主包中
    • 主包通常用来放置启动页/tabbar页面
  • 分包：
    • 一开始不需要先加载的页面可以放在分包
    • 分包只能使用自己的或主包的资源，不能使用其他子包的资源！

独立分包​

  • 独立分包在 常规分包的基础上，增加一个independent声明字段设置为true
  • 一个小程序中可以有多个独立分包

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

特点：

  • 独立分包不能依赖主包或者其他包的内容 ，【独立分包是独立的个体，不依赖其他包】

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

    • 因为不依赖主包，所以独立分包的页面，不需要下载主包

    • 可以联想成 相当与 独立分包 是一个独立的小程序

  • 主包中的app.wxss的样式文件，对独立分包无效，需要避免在独立分包中的页面使用 app.wxss中的样式

限制：

  • 独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制

  • 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式

  • App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为

  • 独立分包中暂时不支持使用插件

场景：​

  • 如果不依赖于主包中的任何内容时可设置为独立分包

  • 通常在某些页面和当前小程序的其他页面 关联性不大的时候可进行独立分包

  • 比如： 临时加的广告页、活动页等等，这些页面与小程序其他页面没有关联

分包预下载​

  • 可以提高用户体验，提升后续分包加载速度

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

  • 预下载分包行为在进入某个页面时触发，通过在 app.json 增加 preloadRule 配置来控制。

key(进入的页面路径)：{ packages : [预下载的包名 || 预下载的包的根路径] }

json
 "preloadRule": {
    "pages/index": {
      "network": "all", // 指定网络下预下载 ，可选值为：all: 不限网络 wifi: 仅 wifi 下预下载
      "packages": ["important"] // 进入页面后预下载分包的 root根路径 或 name包名。__APP__ 表示主包
    },
    // 进入home页面，下载分包sub1、sub2
    "pages/home/home":{
      "network": "all",
       "packages":['sub1',"sub2"]
    },
    "sub1/index": { 
      "packages": ["hello", "sub3"] // 加载的分包
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    },
  }

分包预下载目前只支持通过配置方式使用，暂不支持通过调用 API 完成

限制​

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

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

  • 所有预加载的页面 + 分包 不能超过2M， 因此设置预下载 只能设置必须的

不能保证把分包所有页面都进行预下载，分包预下载机制 是由限额的

分包异步化​

独立分包 getApp问题​

  • 独立分包与普通分包不同，独立分包是独立运行，是不依赖主包，也无法访问主包内容, 独立分包运行时, App不一定被注册，因此getApp不一定可以获得App对象

  • 当用户从独立分包页面启动小程序时，主包不存在，App也不存在，此时调用 getApp() 获取到的是 undefined。 当用户进入普通分包或主包内页面时，主包才会被下载，App 才会被注册。

  • 当用户是从普通分包或主包内页面跳转到独立分包页面时，主包已经存在，此时调用 getApp() 可以获取到真正的 App。

由于这一限制，开发者无法通过 App 对象实现独立分包和小程序其他部分的全局变量共享。

为了在独立分包中满足这一需求，基础库 2.2.4 版本开始 getApp 支持 [allowDefault] 参数，在 App 未定义时返回一个默认实现。当主包加载，App 被注册时，默认实现中定义的属性会被覆盖合并到真正的 App 中。

  • 独立分包中
js
const app = getApp({allowDefault: true}) // {}
app.data = 456
app.global = {}
  • app.js 中
js
App({
  data: 123,
  other: 'hello'
})

console.log(getApp()) // {global: {}, data: 456, other: 'hello'}

分包如何划分​

  • 按照业务逻辑划分
  • 除tabBar之外的页面全部做成分包
    • 这样既解决了启动的问题, 也可以避免主包过大的问题. 具体如何划分分包、可依据项目实际情况去选择