分包異步化分包難題不用怕

轉載自微信公衆号“微信開發者”：

https://mp.weixin.qq.com/s/5-ftrzHghebYYlx64oHaOA

在小程式開發過程中，你是否對分包問題感到困擾？

多業務的分包難以劃分

分包體積膨脹

下載下傳并注入無用代碼

插件無法實作分包處理

……

為解決上述問題，微信團隊提供【分包異步化】新能力，實作跨分包元件、跨分包方法，成功解決分包難、分包不合理等問題。

• • 分包異步化原理 • •

原有的分包隔離機制導緻各分包之間無法引用自定義元件或邏輯代碼，是以導緻分包難等一系列問題。分包異步化能力打通不同分包的引用關系，解決小程式代碼包合理化的問題，支援跨分包元件、跨分包方法。

• • 跨分包元件 • •

當使用其他分包元件時，代碼包需要增加占位元件 (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 及以上版本的微信開發者工具。更低版本的基礎庫相容工作預計在一個月後完成。

• • 總結 • •

實作分包異步化能力後，主包的「公有」性質被削弱，「前置」性質顯得更重要（優先于所有分包注入運作且預設注入運作）。開發者可以根據自身業務訴求，結合分包異步化，進行小程式調優，實作更快的啟動速度、按需下載下傳和注入代碼包、合理處理公有元件等效果。

分包異步化 分包難題不用怕

分包異步化分包難題不用怕