小程序-分包加载
某些情況下,開發者需要將小程序劃分成不同的子包,在構建時打包成不同的分包,用戶在使用時按需進行加載。
在構建小程序分包項目時,構建會輸出一個或多個分包。每個使用分包小程序必定含有一個主包。所謂的主包,即放置默認啟動頁面/TabBar 頁面,以及一些所有分包都需用到公共資源/JS 腳本;而分包則是根據開發者的配置進行劃分。
在小程序啟動時,默認會下載主包并啟動主包內頁面,當用戶用戶進入分包內某個頁面時,客戶端會把對應分包下載下來,下載完成后再進行展示。
目前小程序分包大小有以下限制:
- 整個小程序所有分包大小不超過 8M
- 單個分包/主包大小不能超過 2M
優點
- 用戶在使用時按需進行加載
- 可以優化小程序首次啟動的下載時間
- 進入主包頁面時,需要下載的代碼量小了很多,白屏時間更短,體驗更佳
- 在多團隊共同開發時可以更好的解耦協作
關于主包
- 第一次進入小程序,默認下載主包代碼
- 首頁的 默認啟動頁面/TabBar 頁面必須在 app(主包)內
- 分包以外的所有代碼,都會被打入主包
- 分包內代碼可以引用主包內代碼
關于分包
- 因為存在資源依賴關系,微信的機制是先下載主包,后下載分包
- 分包目錄不能在主包目錄下面
- 分包可以引用自己包內、主包內的資源,不能引用其他分包內的資源
使用方法
支持分包的小程序目錄結構如下:
├── 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"]}] }api地址
https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
總結
- 上一篇: vue 引入swiper4,在有些手机D
- 下一篇: VUE 使用插件vue-clipboar