分包加载

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

此功能已经被各种小程序支持了,这个能有效提升我们打开小程序的速度。

小程序使用

微信上,在app.js目录下建立一个wxConfig.json或 buConfig.json…

  1. {
  2. "subpackages": [
  3. {
  4. "name": "hotel",
  5. "resource": "pages/hotel"
  6. },
  7. {
  8. "name": "ticket",
  9. "resource": "pages/ticket"
  10. },
  11. {
  12. "name": "train",
  13. "resource": "pages/train"
  14. },
  15. {
  16. "name": "vacation",
  17. "resource": "pages/vacation"
  18. }
  19. ]
  20. }

会自动翻译成下面的内容放到app.json中

  1. {
  2. "subpackages": [ //百度下会编译为subPackages
  3. {
  4. "root": "pages/hotel",
  5. "name": "hotel",
  6. "pages": ["index","aaa","bbb","ccc"]
  7. },
  8. {
  9. "root": "pages/ticket",
  10. "name": "ticket",
  11. "pages": ["index","aaa","bbb","ccc"]
  12. },
  13. {
  14. "root": "pages/train",
  15. "name": "train",
  16. "pages": ["index","aaa","bbb","ccc"]
  17. },
  18. {
  19. "root": "pages/vacation",
  20. "name": "vacation",
  21. "pages": ["index","aaa","bbb","ccc"]
  22. },
  23. ]
  24. }

subpackages 中,每个分包的配置有以下几项:

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

快应用的分包加载

在app.js同一目录下,建一个quickConfig.json。里面内部为

  1. {
  2. "subpackages": [
  3. {
  4. "name": "hotel",
  5. "resource": "pages/hotel"
  6. },
  7. {
  8. "name": "ticket",
  9. "resource": "pages/ticket"
  10. },
  11. {
  12. "name": "train",
  13. "resource": "pages/train"
  14. },
  15. {
  16. "name": "vacation",
  17. "resource": "pages/vacation"
  18. }
  19. ]
  20. }

它们会自动加入manifest.json中

打包原则

声明 subpackages 后,将按 subpackages 配置路径进行打包,subpackages 配置路径外的目录将被打包到 app(主包) 中app(主包)也可以有自己的 pages(即最外层的 pages 字段)subpackage 的根目录不能是另外一个 subpackage 内的子目录tabBar 页面必须在 app(主包)内

引用原则

packageA 无法 require packageB JS 文件,但可以 require app、自己 package 内的 JS 文件packageA 无法 import packageB 的 template,但可以 require app、自己 package 内的 templatepackageA 无法使用 packageB 的资源,但可以使用 app、自己 package 内的资源

低版本兼容

由微信后台编译来处理旧版本客户端的兼容,后台会编译两份代码包,一份是分包后代码,另外一份是整包的兼容代码。 新客户端用分包,老客户端还是用的整包,完整包会把各个 subpackage 里面的路径放到 pages 中。

目前 支付宝与字节跳动小程序不支持分包