小程序分包加載實現代碼包總上限8M

1. 背景

　　2018年6月15日週五23點43分，小程序發佈官方公告：小程序分包加載功能升級，新增性能監控，意味着小程序的代碼包總上限可提高至8M，可是分包的大小仍是不超過2M。便可以使用1個主包，多個分包的方式達到8M的總的代碼包大小。這對於廣大開發者來講無疑是重大喜訊，

 

2. 分包加載流程以及目的：

　　通常狀況下，小程序的代碼將打包在一塊兒，在小程序啓動時一次性下載完成。

　　採用分包時，小程序的代碼包能夠被劃分爲幾個：一個是「主包」，包含小程序啓動時會立刻打開的頁面代碼和相關資源；其他是「分包」，包含其他的代碼和資源。

　　這樣，小程序啓動時，只須要先將主包下載完成，就能夠馬上啓動小程序。這樣就能夠顯著下降小程序代碼包的下載時間。

 

 3. 那麼究竟如何利用代碼實現呢？

 

第一種：新項目開發

配置方法

假設支持分包的小程序目錄結構以下：

├── 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", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ] }
這裏詳情能夠見官方文檔 https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
官方demo案例：https://res.wx.qq.com/wxdoc/dist/assets/media/demo-subpackages.b42a3adb.zip

第二種： 現有項目對獨立項目進行分包

　　以下圖所示，我這裏的兩個子目錄tick和rain就構成了兩個分包，每一個分包下均可以有本身的頁面代碼（資源文件建議放cdn）。pages裏的路徑就是小程序的主包，在小程序啓動時，「tick」和「rain」兩個子目錄的內容不會立刻被下載下來，只有pages主包裏的路徑內容纔會被下載。利用這個特性就能夠顯著下降初始啓動時的下載時間。

 

 

4. 注意幾點：

　　1. 不要引用同級分包的內容包括js，wxss

　　2. tabBar不能分包

　　3. 分包不要超過2M

 

在這裏先說明這只是我的見解，不喜勿噴，歡迎你們前來探討。

————————————————————————————————————————————————

版權歸本網站的做者全部，轉載請註明出處，謝謝你們。