likes
comments
collection
share

小程序项目体积越滚越大，还不用分包怕是要加班了！

作者站长头像
站长
· 阅读数 67

1.了解分包的概念和好处

1.1 什么是分包

​ 分包指的是把一个完整的小程序项目,按照需求划分为不同的包,在构建时打包不同的分包，用户在使用时按需进行加载

1.2分包的好处
  • 可以优化小程序首次启用的下载时间
  • 在多团队共同开发时可以更好的解耦协作
1.3 主包+分包进行构成

使用分包的小程序，必定包含一个主包

  • 主包：包含了默认的启动页面、TabBar 页面以及所有分包都需要用到的公共资源
  • 分包：分包的页面+分包页面中资源根据开发者的配置包含的某些小程序页面以及页面需要使用的私有资源

2. 分包前后项目的构成

2.1 分包前项目的构成
  • 分包前，小程序项目中所有页面和资源都被打包到了一起 ，导致整个项目体积过大，影响小程序首次启动的下载时间。

​ 小程序项目体积越滚越大，还不用分包怕是要加班了！

2.2 分包后项目的构成

  • 分包后，小程序项目由1个主包+多个分包组成：

    • 主包：一般只包含项目的启动页面或TabBar页面，以及所有分包都需要用到的一些公共资源
    • 分包：只包含和当前分包有关的页面和私有资源

    小程序项目体积越滚越大，还不用分包怕是要加班了！

3 分包加载

  • 在小程序启动时，默认会下载主包并启动主包内页面

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

    • 非tabBar页面可以按照功能的不同,划分不同的分包之后，进行按需下载

4.分包的体积限制

  • 目前，小程序分包的大小有以下两个限制

    • 整个小程序所有的分包大小不超过20M（主包+所有分包）
    • 单个分包/主包大小不能超过2M

5 分包的配置

5.1如何配置分包

  • 在pages.json的subpackages节点中声明分包的结构

    • 在subpackages中配置好信息以后保存，会自动在项目目录下生成对应的页面结构

  • 每个分包可以配置以下几个选项

    字段类型说明
    rootString分包根目录
    nameString分包别名，分包预下载时可以使用
    pagesStringArray分包页面路径，相对与分包根目录
    independentBoolean分包是否是独立分包

小程序项目体积越滚越大，还不用分包怕是要加班了！

  • 为此，我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。在 uni-app 项目中，配置分包的步骤如下：

    1. 在项目根目录中，创建分包的根目录，命名为 subpkg
    2. 在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：
{
  "pages":[
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs",
    "pages/contact/contact",
    "pages/message/message",
    "pages/profile/profile"
  ],
  "subPackages": [//声明分包结构
    {
      "root": "packageA",//第一个分包
      "name": "packageA",//分包别名
      "pages":[
           "register_an_account/register_an_account"
       ]
    },
    {
      "root": "packageB",//第二个分包
      "pages":[
           "profile/profile",
       ]
    }
  ]
}
5.2 打包原则
  1. 声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径之外的内容会被打包成主包
  2. 主包可以拥有自己的 pages，即项目根目录下的 pages
  3. 分包之间不允许相互进行嵌套
  4. TabBar 必须声明在主包内
5.3 引用原则
  1. 分包之间的私有资源不能够相互引用
  2. 主包不可以引用分包中的资源
  3. 但是分包可以引用主包中的共享资源

6.独立分包

6.1 什么是独立分包
  1. 独立分包是一种特殊类型的分包，因为独立分包可以独立于主包和其他分包运行。
  2. 从独立分包进入小程序时，不需要下载主包，只有用户进入主包和普通分包的时候，主包才会被下载
  3. 实际开发中，开发者可以按照需求将一些具有独立性的页面配置到独立分包中。
    • 小程序从普通分包启动时，会首先下载主包，才能够展示普通分包
    • 独立分包则不会下载主包，而是独立运行，不对主包进行依赖，从而提高包的启动速度
6.2 独立分包的配置方式

在 pages.json 的 subpackages 字段中，给需要设置为独立分包的分包配置项添加 independent 字段即可


"subPackages": [
  {
    "root": "packageA",
    "pages": [
      "pages/shoplist/shoplist",
      "pages/shopdetail/shopdetail"
    ]
  },
  {
    "root": "packageB",
    "independent": true,//开启独立分包
    "pages": [
      "pages/profile/profile",
      "pages/profileedit/profileedit"
    ]
  }
]
6.3 独立分包的使用限制
  1. 独立分包属于分包的一种，因此普通分包的任何限制都适用于独立分包，同理，普通分包中相关的组件处理方式也适用于独立分包。
  2. 独立分包中不能依赖主包和其他分包中的内容
  3. App() 构造器只能够声明在主包中，不能够定义在独立分包中

7 分包预下载

7.1 什么是分包预下载

开发者通过配置，可以让用户访问某个页面的时候，由框架自动预下载用户可能访问到的分包，从而提升进入后续分包页面的启动速度。对于独立分包，可能预下载应用的主包。

7.2 分包预下载的配置

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

  2. preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，配置项参数如下：

    字段类型必填默认值说明
    packagesStringArray是无进入页面后预下载分包的 root 或 name。App 表示主包。
    networkString否wifi在指定网络下预下载，可选值为：all : 不限网络wifi: 仅wifi下预下载

  3. 参考案例

    
"preloadRule": {//预加载其他包配置
  // 用户访问的页面路径，也是触发预下载的页面路径
  "pages/message/message": {
    "packages": ["packageA"], // 进入页面后需要预下载的包,可以通过root或name指定预下载包
    "network": "all" // 指定网络下进行预下载
    }
 }

  4. 分包预下载的配置事项

    1. 同一个分包中的页面享有共同的预下载大小限额 2M

      • 例如：一个分包中有 3 个页面，如果访问 3 个页面都需要预下载分包
      • 那么：3 个页面需要预下载的分包总体积之和不能够超过 2M

    ​

转载自:https://juejin.cn/post/7081431609785712647
评论
请登录