小程序系列--如何使用分包加载

在小程序开发的过程中，小程序的体积会随着版本的迭代变的越来越大，这时候我们就希望能够将小程序分成多个包从服务器下载，这样既可以加快首屏的渲染也便于后续按需加载的实现。小程序在?微信客户端 6.6.0，基础库??1.7.3??及以上版本开始支持?分包功能。

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个?主包?。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而?分包?则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

配置方法

配置例子

{
  "pages": ["pages/index","pages/shopcart"],"subpackages": [
    {
      "root": "packageA","pages": ["pages/mine",0);">"pages/order"]
    },{
      "root": "packageB","name": "pack2",0);">"pages/detail",0);">"pages/pay"]
    }
  ]
}

├── app.js
├── .json
├── .wxss
├── packageA
│   └── pages
│       ├── mine
│       └── order
├── packageB
│   └── pay
│       └── detail
├── pages
│   ├── index
│   └── shopcart
└── utils

打包原则

• 声明??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 内的 template
• packageA??无法使用??packageB??的资源，但可以使用??app?、自己 package 内的资源

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!