普通分包

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

在智能小程序的打包中，默认会有一个主包，主包中包含了启动页面，和所有分包都会用到的公共资源/JS 脚本。而分包则是根据开发者的配置划分的。

整个小程序所有分包大小不超过 8M，单个分包/主包大小不能超过 2M。
在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会把对应分包下载下来，下载完成后再进行展示。

将智能小程序按照业务特点合理的分包，可以提升智能小程序的加载速度，优化用户体验。

使用方法

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

假设支持分包的小程序，目录结构如下：

  1. ├── App.js
  2. ├── App.json
  3. ├── App.css
  4. ├── packageA
  5. │   └── pages
  6. │       ├── pageOne
  7. │       │   
  8. │       └── pageTwo
  9. │ 
  10. ├── packageB
  11. │   └── pages
  12. │       ├── pageThree
  13. │       │   
  14. │       └── pageFour
  15. │           
  16. ├── pages
  17. │   └── index
  18. │   │   
  19. │   └── tabOne           
  20. └

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

  • JSON
  1. {
  2.     // 主包，推荐只保留最常用的核心页面：启动页、tab页及公共资源
  3.     "pages": [
  4.         "pages/index/index",
  5.         "pages/tabOne/tabOne"
  6.     ],
  7.     "subPackages": [
  8.         {
  9.             "root": "packageA/pages",
  10.             "name": "packageOne",    
  11.             "pages": [
  12.                 "pageOne/pageOne",
  13.                 "pageTwo/pageTwo"
  14.             ],
  15.             "independent": true
  16.         },
  17.         {
  18.             "root": "packageB/pages",
  19.             "name": "packageTwo",    
  20.             "pages": [
  21.                 "pageThree/pageThree",
  22.                 "pageFour/pageFour"
  23.             ],
  24.             "independent": true
  25.         }
  26.     ],
  27.     "tabBar": {
  28.         "borderStyle": "black",
  29.         "color": "#000000",
  30.         "selectedColor": "#000000",
  31.         "list": [
  32.             {
  33.                 "pagePath": "pages/index/index",
  34.                 "text": "首页"
  35.             }, 
  36.             {
  37.                 "pagePath": "pages/tabOne/tabOne",
  38.                 "text": "tabOne"
  39.             }
  40.         ]
  41.     }
  42. }

主包页面跳转分包页面

  • SWAN
  1. <!-- index.swan -->
  2. <view class="navigate-list">
  3.     <navigator url="/packageA/pages/pageOne/pageOne" class="navigator">
  4.         跳 pageOne
  5.     </navigator>
  6. </view>

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

字段类型说明
rootString分包根目录
nameString分包别名。
pagesArray.<string>分包页面路径，相对于分包根目录。
independentBoolean分包是否是独立分包

打包原则

  • 声明 subPackages 后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目录将被打包到 App（主包） 中；
  • App（主包）也可以有自己的 pages（即最外层的 pages 字段）；
  • 首页的 TAB 页面必须在 App（主包）内。

引用原则

  • 两个分包之间无法互相引用对方包中的 js，但是分包中可以引用主包，或者自己分包内的 js。
  • 主包不能引用分包中的js。