一，為什麼要使用分包

2017.01.09 小程式上線時，官方限制小程式程式碼包不能超過1MB 大小。所以小程式才能“隨用隨走“ ，秒開。但是時至今日，官方公佈的最新的程式碼體積控制：

整個小程式所有分包大小不超過 8M
單個分包/主包大小不能超過 2M

從1M到8M，變化的不只是小程式的程式碼體積，更是小對程式的開啟速度產生極大的影響。1M的時候小程式可以做到秒開，如果8M還能這麼靈活輕便嗎？？？？
使用者開啟小程式，首先會下載小程式的所有程式碼，然後根據配置開啟首頁。在8M的情況下，這個下載的過程是相當的耗時的。因此，官方為了解決這個痛點，特此推出了分包。

在小程式啟動時，預設會下載主包並啟動主包內頁面，當用戶使用者進入分包內某個頁面時，客戶端會把對應分包下載下來，下載完成後再進行展示。
 

如此一來小程式載入流程變成了

1. 首次啟動時，先下載小程式主包，顯示主包內的頁面；
2. 如果使用者進入了某個分包的頁面，再下載這個對應分包，下載完畢後，顯示分包的頁面。

二，怎麼使用分包

官方規定支援分包的最低版本：

微信客戶端 6.6.0，基礎庫 1.7.3 及以上版本開始支援。開發者工具請使用 1.01.1712150 及以上版本，

1，修改目錄

使用分包並不用對目前程式碼做什麼修改，僅僅修改一下程式碼的目錄檔案和配置檔案即可。

例如我們把小程式的目錄結構修改成如下：

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils
 

劃分分包的時候我們要遵循一下原則：

1. 避免分包與分包之間引用上的耦合。因為分包的載入是由使用者操作觸發的，並不能確保某分包載入時，另外一個分包就一定存在，這個時候可能會導致 JS 邏輯異常的情況，例如報「”xxx.js” is not defined」這樣的錯誤；
2. 一些公共用到的自定義元件，需要放在主包內。

目錄修改後我們要注意會發生以下變化：

• packageA 無法 require packageB JS 檔案，但可以 require app、自己 package 內的 JS 檔案
• packageA 無法 import packageB 的 template，但可以 require app、自己 package 內的 template
• packageA 無法使用 packageB 的資源，但可以使用 app、自己 package 內的資源

2，修改app.json

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

從app.json的配置中我們可以看出，pages裡面只有主包的兩個頁面，那麼載入速度必然會提升很多。
subPackages的具體引數含義：

修改app.json要注意一下幾點：

• 宣告 subPackages 後，將按 subPackages 配置路徑進行打包，subPackages 配置路徑外的目錄將被打包到 app（主包） 中
• app（主包）也可以有自己的 pages（即最外層的 pages 欄位）
• subPackage 的根目錄不能是另外一個 subPackage 內的子目錄
• tabBar 頁面必須在 app（主包）內

以上就是小程式中分包的使用方法。具體可以參考小程式分包