小程序分包加载-白红宇

开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必须包含

一个主包，所谓的主包，即放置默认启动页/TabBar 页面，以及一些所有分包需要用到

整个小程序所有分包大小不超过 8M单个分包/主包大小不能超2M

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更高的解耦协作。

配置方法：

假设支持分包的小程序目录结构

├── app.js├── app.json├── app.wxss├── packageA│ └── pages│ ├── cat│ └── dog├── packageB│ └── pages│ ├── apple│ └── banana├── pages│ ├── index│ └── logs└── utils复制代码

开发者通过在 app.json subPackages 字段声明项目分包结构：

{ "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ]}复制代码

subPackages 中，每个分包的配置有以下几项：

打包原则

1.声明 subPackages 后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目

2.录将被打包到 app（主包）中

3.app（主包）也可以有自己的 pages（即最外层的 pages 字段）

4.subPackage 的根目录不能是另外一个 subPackage 内的子目录

5.tabBar 页面必须在 app（主包）内

引用原则

packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件

packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template

ackageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源

独立分包

独立分包是小程序的一种特殊类型的分包，可以独立于主包和其他分包独立运行。从独立

分包中页面进入小程序时，不需要下载主包，当小程序进入不同分包的时候，主包才会被下载。

可发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的

分包页面中启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上

提升分包页面的启动速度，一个小程序中可以有多个独立分包。

配置方法：

假设小程序的目录如下；

├── app.js　　├── app.json　　├── app.wxss　　├── moduleA　　│ └── pages　　│ ├── rabbit　　│ └── squirrel　　├── moduleB　　│ └── pages　　│ ├── pear　　│ └── pineapple　　├── pages　　│ ├── index　　│ └── logs　　└── utils复制代码

开发者可以通过在 app.json 的 subpackages 字段中的分包配置中自定义 independent

字段声明对应分包为独立分包

{ 　　 "pages": [ 　　 　　"pages/index", 　　　　"pages/logs" 　　　　], 　　　"subpackages": [ 　　　　{ 　　　　"root": "moduleA", 　　　　 "pages": [ 　　　　"pages/rabbit", 　　　　 "pages/squirrel" 　　　　] 　　　　}, { 　　　　"root": "moduleA", 　　　　"pages": [ 　　　　"pages/pear", 　　　　"pages/pineapple" 　　　　], 　　"independent": true 　　}//欢迎加入全栈开发交流圈一起学习交流：582735936 　　]//面向1-3年前端人员　　} //帮助突破技术瓶颈，提升思维能力复制代码

限制：

独立分包属于分包的一种，普通分包的所有限制独立分包有效。独立分包中插件

自定义组件的处理方式同普通分包。

使用独立分包需要注意：

1.独立分包中不能依赖主包和其他分包中的内容，包括js 文件，template,

2.wxss,自定义组件，插件等，主包的app.wxss 对独立分包无效。应避免在

3.独立分包页面中使用 app.wxss 中的样式。

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

5.独立分包中暂时不支持使用插件。

注意事项：

（1）关于 getApp()

与普通分包不同，独立分包运行时，App 并不一定被注册，因此，getApp()

也不一定获得App 对象，

当用户从独立分包页面启动小程序时，主包不存在，App 也不存在，此时调用

getApp 获取到的是undefined 。当用户进入普通分包或者主包时，主包才会

被下载， App 才会被注册。

当用户从普通分包或者主包的页面挑到独立分包的时候，主包已经存在，此时

调用getApp(),才能获得真正的App。

为了满足独立分包中的这一需求，基础库2.2.4 版本开始getApp 支持，

allowDefault 参数，在 App 未定义的时候返回一个默认实现。当主包

加载 App 被注册的时候，默认实现中被定义的属性会被合并覆盖到默认的App 中。

示例：

const app = getApp({allowDefault:true})　　　　　　app.data = 456　　　　　　app.global = {} 　　　　.app.js 中　　　　　　App({　　　　　　　　data:12　　　　　　　　other:'hello　　　　　　}) 　console.log(getApp()) // {global: {} ,data: 456,other: 'hello'}复制代码

（2）关于 App 的生命周期

当从独立分包中启动小程序时，主包的中的onLanch 和首次 onShow 会从

独立分包页面首次进入主包或普通分包页面时调用。

分包下载：

开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可需要的分包。

提升进入后续分包页面的速度，对于独立分包，可以预下载主包。

配置方法：

预下载分包行为在进入某个页面的时候触发，在通过app.json 增加 preloadRule

{ "pages": ["pages/index"], "subpackages": [ { "root": "important", "pages": ["index"], }, { "root": "sub1", "pages": ["index"], }, { "name": "hello", "root": "path/to", "pages": ["index"] }, { "root": "sub3", "pages": ["index"] }, { "root": "indep", "pages": ["index"], "independent": true } ], "preloadRule": { "pages/index": { "network": "all", "packages": ["important"] }, "sub1/index": { "packages": ["hello", "sub3"] }, "sub3/index": { "packages": ["path/to"] }, "indep/index": { "packages": ["__APP__"] }//欢迎加入全栈开发交流圈一起学习交流：582735936 }//面向1-3年前端人员}//帮助突破技术瓶颈，提升思维能力复制代码

preloadRule 中，key 是页面路径， value 是进入此页面的预下载配置，每个配置都

有以下几项。

限制

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

如：页面A 和页面B 都在同一个分包中，A 中预下载大小为0.5 M的分包，

B 中最大多只能预下载大小1.5 的分包。

结语

欢迎加入全栈开发交流

感谢您的观看，如有不足之处，欢迎批评指正**[了解更多](http://qm.qq.com/cgi-bin/qm/qr?k=EH-M7wq6c7VHXkRrNUeae25NUlXHVhwj)**