分包异步化 分包难题不用怕-新昌嵊州网络公司为你呈现

作者： 新昌嵊州网络公司 【 转载 】 来源： 微信派 2023-07-01

在小程序开发过程中，你是否对分包问题感到困扰？




多业务的分包难以划分
分包体积膨胀
下载并注入无用代码
插件无法实现分包处理
……

为解决上述问题，微信团队提供【分包异步化】新能力，实现跨分包组件、跨分包方法，成功解决分包难、分包不合理等问题。

• • 分包异步化原理 • •
原有的分包隔离机制导致各分包之间无法引用自定义组件或逻辑代码，因此导致分包难等一系列问题。分包异步化能力打通不同分包的引用关系，解决小程序代码包合理化的问题，支持跨分包组件、跨分包方法。



image.png


• • 跨分包组件 • •




当使用其他分包组件时，代码包需要增加占位组件 (component placeholder)，实现页面高效配置。例如页面展示时，分包 (subpackageB) 仍未下载，进行以下操作实现跨分包组件：
1. 使用组件 <simple-list> 代替 <list>，使用 <view> 代替 <card>，完成页面渲染
2. 完成渲染后，开始下载和注入分包
3. 完成分包下载和注入后，将占位组件替换成真正的组件













// subPackageA/pages/index.json{  "usingComponents": {    "button": "../../commonPackage/components/button",    "list": "../../subPackageB/components/full-list",    "simple-list": "../components/simple-list"  },  "componentPlaceholder": {    "button": "view",    "list": "simple-list"  }}

• • 跨分包方法 • •
在小程序开发过程中，通过require回调函数或requireAsync异步调用2种方法，分包异步化能够引用其他分包的逻辑代码。具体操作如下：










// subPackageA/index.js// 使用回调函数风格的调用require('../subPackageB/utils.js', utils => {  console.log(utils.whoami) // Wechat MiniProgram})// 或者使用 Promise 风格的调用require.async('../commonPackage/index.js').then(pkg => {  pkg.getPackageName() // 'common'})

• • 兼容性要求 • •
分包异步化能力要求基础库版本 2.17.3 及以上（正式发布需在 mp 设置最低版本基础库 2.17.3）。平台能力兼容安卓微信、iOS 微信、1.05.2104272 及以上版本的微信开发者工具。更低版本的基础库兼容工作预计在一个月后完成。

• • 总结 • •
实现分包异步化能力后，主包的「公有」性质被削弱，「前置」性质显得更重要（优先于所有分包注入运行且默认注入运行）。开发者可以根据自身业务诉求，结合分包异步化，进行小程序调优，实现更快的启动速度、按需下载和注入代码包、合理处理公有组件等效果。

为了更好地提升用户体验，即日起至2021年9月20日体验分包异步化能力并提出反馈，微信团队将从有效问卷中抽取用户获得微信官方周边礼品（分包异步化有奖调研问卷）。




黄脸盲盒（单个）、毛绒斜挎包、红包风扇




*注意：实际奖品选择与发放将视官方周边更新与存货情况进行适当调整

如有其他小程序相关问题，可在微信小程序交流专区 中发帖互动，将有技术专员为大家解答及进行深度交流。

阅读原文

推荐

  • QQ空间

  • 新浪微博

  • 人人网

  • 豆瓣

上一篇 下一篇

为你推荐

取消
技术支持： 杭州云远科技有限公司
  • 首页
  • 电话
  • 留言
  • 会员