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

在小程序開發的過程當中，小程序的體積會隨着版本的迭代變的愈來愈大，這時候咱們就但願可以將小程序分紅多個包從服務器下載，這樣既能夠加快首屏的渲染也便於後續按需加載的實現。小程序在微信客戶端 6.6.0，基礎庫 1.7.3 及以上版本開始支持 分包功能。
在構建小程序分包項目時，構建會輸出一個或多個分包。每一個使用分包小程序一定含有一個主包。所謂的主包，即放置默認啓動頁面/TabBar 頁面，以及一些全部分包都需用到公共資源/JS 腳本；而分包則是根據開發者的配置進行劃分。
在小程序啓動時，默認會下載主包並啓動主包內頁面，當用戶進入分包內某個頁面時，客戶端會把對應分包下載下來，下載完成後再進行展現。

配置方法

配置例子

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

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── mine
│       └── order
├── packageB
│   └── pages
│       ├── 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 內的資源