一站式带你了解微信小程序中的 分包+独立分包+分包预下载

一站式带你了解微信小程序中的 分包+独立分包+分包预下载

分包

1.什么是分包：

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

2.分包的好处

可以优化小程序首次启动的下载时间
在多团队共同开发时可以更好的解耦操作

3.分包后项目构成

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

4.分包的加载规则

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

   tabBar页面需要放到主包中
   

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

   非tabBar页面根据功能的不同，划分为不同的分包之后，进行按需下载
   

5.分包的体积限制

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

6.分包的基本方法

1.打包原则

• 小程序会按subpackages的配置进行分包，subpackage之外的目录将被打包到主包中

• 主包也可以有自己的pages(即最外层的pages字段)

• tabBar页面必须在主包内

• 主分包之间不能相互嵌套

2.引用原则

• 主包无法引用分包内的私有资源

• 分包之间不能相互引用私有资源

• 分包可以引用主包内的公共资源
  

独立分包

（不依赖于主包，提升分包页面的启动速度）

1 .什么是独立分包

	独立于主包和其他分包而单独运行

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

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

3 .独立分包的应用场景

开发者可以按需，将某些一定功能的独立性的页面配置到独立分包中，原因如下：

• 当小程序从普通的分包页面启动时，需要首先下载主包
• 而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度
  tip:一个小程序中可以有多个独立分包

4 .独立分包的配置方法

“independent”:true //通过此节点，声明当前 moduleB 分包为 独立分包

“subpackages”: [
{
“root”: “packageA”,
“name”: “p1”,
“pages”: [
“pages/list/list”
],
“independent”: true
}
],

5.引用原则

多分包和普通分包以及主包之间，是相互隔绝的，不能互相引用批次的资源

1. 主包无法引用独立分包内的私有资源
2. 独立分包之间，不能相互引用私有资源
3. 独立分包和普通分包之间，不能相互引用私有资源
4. tip特别重要：独立分包中不能引用主包内的公共资源

分包预下载

1.什么是分包预下载

在进入小程序的某个页面时，有框架自动预下载可能需要的分包，
从而提升进入后续分包页面时的启动速度

2.配置分包的预下载

预下载分包的行为，会在进行指定的页面时触发。app.json中，使用preload节点定义分包的预下载规则，代码实例如下：
"preloadRule":{
    "pages/ideal/ideal":{//触发分包预下载的页面路径
        	//network 表示在指定的网络模式下进行预下载
        	//可选值为all(不限网络) 和 wifi (默认值)
        "network":"all",
            //packages:表示进入页面后，预下载哪些分包
            //可以通过root 或 name指定预下载哪些分包
         "packages":["packageA"]
    }
}

All:

WIFI:

preloadRule 节点里面由键值对构成的，key 为触发分包预下载的页面路径，value 为配置属性。

属性	说明
packages	是必选的，表示进入页面后，预下载那些分包，
可以通过 root 或 name 指定预下载哪些分包。
network	表示在指定的网络模式下进行预下载，可以选值为 all（不限网络）和wifi （仅 wifi 模式下进行预下载），默认值为 wifi。

| centered 文本居中 | right-aligned 文本居右 |

3.分包预下载的限制

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

感谢观看，这里就是分包+ 独立分包 +分包预下载基本介绍。