# 分包加載
> 微信 6.6 客戶端,1.7.3 及以上基礎庫開始支持,請更新至最新客戶端版本,開發者工具請使用 1.01.1712150 及以上版本,可[點此下載](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)
某些情況下,開發者需要將小程序劃分成不同的子包,在構建時打包成不同的分包,用戶在使用時按需進行加載。
在構建小程序分包項目時,構建會輸出一個或多個功能的分包,其中每個分包小程序必定含有一個**主包**,所謂的主包,即放置默認啟動頁面/TabBar 頁面,以及一些所有分包都需用到公共資源/JS 腳本,而**分包**則是根據開發者的配置進行劃分。
在小程序啟動時,默認會下載主包并啟動主包內頁面,如果用戶需要打開分包內某個頁面,客戶端會把對應分包下載下來,下載完成后再進行展示。
目前小程序分包大小有以下限制:
- 整個小程序所有分包大小不超過 4M
- 單個分包/主包大小不能超過 2M
對小程序進行分包,可以優化小程序首次啟動的下載時間,以及在多團隊共同開發時可以更好的解耦協作。
## 使用方法
假設支持分包的小程序目錄結構如下:
```
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
```
開發者通過在 app.json `subPackages` 字段聲明項目分包結構:
```
{
"pages":[
"pages/index",
"pages/logs"
],
"subPackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
```
## 打包原則
- 聲明 `subPackages` 后,將按 `subPackages` 配置路徑進行打包,`subPackages` 配置路徑外的目錄將被打包到 app(主包) 中
- app(主包)也可以有自己的 pages(即最外層的 pages 字段)
- `subPackage` 的根目錄不能是另外一個 `subPackage` 內的子目錄
- 首頁的 TAB 頁面必須在 app(主包)內
## 引用原則
- `packageA` 無法 require `packageB` JS 文件,但可以 require `app`、自己 package 內的 JS 文件
- `packageA` 無法 import `packageB` 的 template,但可以 require `app`、自己 package 內的 template
- `packageA` 無法使用 `packageB` 的資源,但可以使用 app、自己 package 內的資源
## 低版本兼容
由微信后臺編譯來處理舊版本客戶端的兼容,后臺會編譯兩份代碼包,一份是分包后代碼,另外一份是整包的兼容代碼。 新客戶端用分包,老客戶端還是用的整包,完整包會把各個 subpackage 里面的路徑放到 pages 中。
## 示例項目
[下載 小程序示例分包加載版源碼](https://mp.weixin.qq.com/debug/wxadoc/dev/demo/demo-subpackages.zip)
- 簡介
- 第一章 公眾號開發
- 使用微信JSSDK
- 接口權限配置
- 分享接口
- 隱藏按鈕項
- 微信支付
- 第二章 小程序開發
- 基礎知識
- 分包加載
- WXSS樣式表
- 配置
- app.json配置
- window
- tabBar
- page.json配置
- 邏輯層
- app.js
- 場景值
- page.js
- 初始化數據
- 生命周期函數
- 頁面相關事件處理函數
- 事件處理函數
- 頁面實例方法
- 路由
- 文件作用域
- 模塊化
- 視圖層
- 模板語法
- 列表渲染
- 條件渲染
- 模板
- 事件
- 引用
- WXS語法規范
- WXS數據類型
- WXS控制流程
- WXS基礎類庫
- 組件
- 視圖容器
- view
- scroll-view
- swiper
- movable-view
- cover-view
- 基礎組件
- icon
- text
- rich-text
- progress
- 表單組件
- button
- checkbox
- form
- input
- label
- picker
- picker-view
- radio
- slider
- switch
- textarea
- 導航組件
- navigator
- 媒體組件
- audio
- image
- video
- camera
- 地圖組件
- map
- 畫布組件
- canvas
- 開放能力
- web-view
- 自定義組件
- 組件模版和樣式
- Component
- 組件傳值
- 組件事件
- Behaviors
- 組件間關系
- 網絡請求
- wx.request
- 微信登錄
- 獲取 openid 和 unionid
- 獲取用戶信息
- 將 wx.request 封裝為 promise
- 上傳圖片接口封裝
- 數據存儲
- 存儲數據和讀取數據
- 獲取數據緩存信息
- 移除數據緩存
- 獲取用戶設置
- openSetting
- getSetting
- 第三章 小游戲開發
- 參考資料