文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

分包加载

更新时间：2023/02/02 访问次数：9151

版本要求：依赖手机淘宝客户端 9.15.0 或更高版本；小程序开发者工具 1.15.0 或更高版本。

为了满足日益复杂的小程序业务需求，同时提升首次打开速度，小程序从手淘客户端 9.15.0 版本开始支持分包加载功能。


开发者可以按需将小程序划分为若干个不同的子包。小程序使用分包功能时，会默认有一个主包，启动页面和 tabBar 所有页面都放在主包中，同时包含了小程序所需的公共资源（例如 js 脚本等）。在服务端构建时，会根据开发者的配置，打成不同的分包，用户在使用小程序进入对应分包的页面时，客户端会下载该分包，并进行解析和渲染。


一、使用建议


1）对体积较大的小程序项目，或JS执行时间过长，建议使用此功能。

2）主包只保留最常用的核心页面（首页、tabBar 页面和其他公共资源），将小程序中不经常使用的页面放到多个分包中，启动时只加载主包，使用时按需下载分包，不要一次性下载整个代码包，以提升首页启动速度。

3）对于包含大量资源文件的互动类型小程序，可以将资源文件也进行分包，然后通过调用my.loadSubPackage接口加载分包资源，以提升用户体验。

4）如果小程序由不同的团队协作开发，建议使用此功能。


二、使用方法

1. 配置方法

1）页面分包


典型的页面分包小程序目录如下：

├── app.acss
├── app.js
├── app.json
├── packageA
│   └── pages
│       ├── page1
│       └── page2
├── packageB
│   └── pages
│       ├── page3
│       └── page4
└── pages
    ├── common
    └── index


开发者在 app.json 文件的 subPackages 字段中声明小程序的分包结构：

{
  "pages": [
    "pages/index",
    "pages/common"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/page1",
        "pages/page2"
      ]
    },
    {
      "root": "packageB",
      "pages": [
        "pages/page3",
        "pages/page4"
      ]
    }
  ]
}


subPackages 字段的配置说明如下：


字段

类型

说明

root

String

分包根目录

pages

StringArray

分包页面路径


2）资源分包


典型的资源分包小程序目录如下：

├── app.acss
├── app.js
├── app.json
├── packageA
│     ├── xxx1.png
│     └── xxx2.png
├── packageB
│    ├── yyy1.png
│    └── yyy2.png
└── pages
    ├── common
    └── index


开发者在 app.json 文件的 subPackages 字段中声明小程序的分包结构：

{
  "pages": [
    "pages/index",
    "pages/common"
  ],
  "subPackages": [
    {
      "root": "packageA" // 这里只需要填写root，和调用加载分包api中的name对应
    },
    {
      "root": "packageB"
    }
  ],
  "subPackageBuildType": "shared" //必须
}


开发者在 mini.project.json 文件中声明如下：

"enableEnhancedBuild": true, // 必须
"include":["packageA/**","packageB/**"] //必须


调用加载分包接口：

my.loadSubPackage({
   name: 'packageA', 
   success:  (res) => {
     this.setData({
       subpackageReady:true
     })
     console.log("download success")
   },
   fail: function (res) {
     console.log(res)
     console.log("download fail")
   }
  })


2. 分包构建


完成上述分包配置后，需要在IDE -> 「详情」 勾选 「预览、调试时使用云构建」，否则分包无效。


image


3. 打包与引用原则


1）开发者配置 subPackages 后，服务端将按 subPackages 配置的路径进行打包，subPackages 配置路径外的目录将被默认打包到主包中。

2）启动页面和 tabBar 的所有页面都必须放在主包中。

3）每个分包的根目录不能是另外一个分包内的子目录。

4）分包之间不能相互引用对方包中的资源（比如图片和 js 脚本等），分包可以引用主包和自己包内的资源。

5）分包和主包是分别独立打包的，同一个js模块会在主包和分包中分别存在。


4. 分包大小限制


1）整个小程序所有分包大小不超过20MB。

2）单个分包或主包大小不能超过2MB。


5. 低版本兼容


小程序服务端构建平台负责处理低版本客户端的兼容，服务端会编译并打包成两份源码包，一份是分包后的代码包，另一份是整包的兼容代码包。支持分包的新客户端使用分包，不支持分包的低版本客户端使用整包。


二、常见问题


Q：小程序超过大小限制，应该分包还是减少模块？

A：小程序最大限制是 2M，如果超过了可以进行代码优化，删除一些不必要的依赖包；或者把一些图片放到服务器中远程加载来减小包的大小。以上手段均已尝试，且仍然超过了大小限制，则可以使用小程序分包。

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号