在小程序当中主包里的资源(js, template, wxss, components, 图片)都是全局的,可以被公用;而每个分包相当于有自己的“作用域”,自己的资源,只能用自己的或者使用主包的,但不能使用其他子包的资源。


一、什么是分包

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

为什么要分包

在微信小程序上线时,要求整个小程序所有分包大小不超过 16M(主包 + 所有分包, 单个分包/主包大小不能超过 2M。如果你主包大小大于2M则需要做一些处理,比如分包或者把一些大的资源如图片放在服务器上,然后从服务器上选取所用的图片

分包后项目的构成

分包后,小程序项目由 1 个主包 + 多个分包组成:

  • 主包:一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
  • 分包:只包含和当前分包有关的页面和私有资源
    在这里插入图片描述在这里插入图片描述

分包的加载规则

  • 在小程序启动时,默认会下载主包并启动主包内页面
  • tabBar 页面需要放到主包中
  • 当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示
  • 非 tabBar 页面可以按照功能的不同,划分为不同的分包之后,进行按需下载

分包的体积限制

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

  • 整个小程序所有分包大小不超过 16M(主包 + 所有分包)
  • 单个分包/主包大小不能超过 2M

二、普通分包

1. 配置普通分包

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

在这里插入图片描述

2.打包原则

① 小程序会按 subpackages 的配置进行分包,subpackages 之外的目录将被打包到主包中
② 主包也可以有自己的 pages(即最外层的 pages 字段)
③ tabBar 页面必须在主包内
④ 分包之间不能互相嵌套

3. 普通分包以及主包之间引用原则

主包里的资源(js, template, wxss, components, 图片)都是全局的,可以被公用;而每个分包相当于有自己的“作用域”,自己的资源,只能用自己的或者使用主包的,但不能使用其他子包的资源

① 主包无法引用分包内的私有资源
② 分包之间不能相互引用私有资源
③ 分包可以引用主包内的公共资源
在这里插入图片描述

三、独立分包

1.什么是独立分包

当小程序从普通的分包页面启动时,需要首先下载主包。独立分包本质上也是分包,只不过它比较特殊,可以独立于主包和其他分包而单独运行。
独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度。注意:一个小程序中可以有多个独立分包
在这里插入图片描述

在这里插入图片描述

2. 独立分包和普通分包的区别

最主要的区别:是否依赖于主包才能运行

  • 普通分包必须依赖于主包才能运行
  • 独立分包可以在不下载主包的情况下,独立运行

3. 独立分包的应用场景

开发者可以按需,将某些具有一定功能独立性的页面配置到独立分包中。原因如下:
当小程序从普通的分包页面启动时,需要首先下载主包
而独立分包不依赖主包即可运行,可以很大程度上提升分包页面的启动速度

4. 配置独立分包

在这里插入图片描述

5. 独立分包引用原则

独立分包和普通分包以及主包之间,是相互隔绝的,不能相互引用彼此的资源!例如:
  ①主包无法引用独立分包内的私有资源
  ②独立分包之间,不能相互引用私有资源
  ③独立分包和普通分包之间,不能相互引用私有资源
  ④特别注意:独立分包中不能引用主包内的公共资源

总结

小程序分包后,主包应该是不能引用分包的任何资源,分包可以引用主包的任何资源。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐