背景:
2017.01.09 小程序上線時,微信限制了代碼包不能超過1MB 大小,(現在是2M了)限制大小是出於對小程序啟動速度的考慮,希望用戶在使用任何一款小程序時,都能獲得一種“秒開”體驗。然而,2MB 的大小也限制了小程序功能的擴展,小程序業務的發展可能需要更大的體積。
那么,能否有一種方案,在增加小程序包大小的同時,也能保持不錯的啟動速度呢?
為了解決這個矛盾點,微信推出了「分包加載」這個技術方案。
分包加載的介紹
大部分小程序都會由某幾個功能組成,通常這幾個功能之間是獨立的,但會依賴一些公共的邏輯,並且這些功能通常會對應某幾個獨立的頁面。那么小程序代碼的打包,大可不必一定要打成一個,可以按照功能的划分,拆分成幾個分包,當需要用到某個功能時,才加載這個功能對應的分包。
對於用戶來說,小程序加載流程變成了:
1.首次啟動時,先下載小程序主包,顯示主包內的頁面;
2.如果用戶進入了某個分包的頁面,再下載這個對應分包,下載完畢后,顯示分包的頁面。
采用分包加載,對開發者而言,能使小程序有更大的代碼體積,承載更多的功能與服務;而對用戶而言,可以更快地打開小程序,同時在不影響啟動速度前提下使用更多功能
分包的划分
在配置前首先需要開發者規划下各個分包需要容納的內容,我們建議開發者按照功能划分的的原則,將同一個功能下的頁面和邏輯放置於同一個目錄下,對於一些跨功能之間公共邏輯,將其放置於主包下,這樣可以確保在分包引用這部分功能時,這部分的邏輯一定存在。
在分包划分時,應該注意以下事項:
1.避免分包與分包之間引用上的耦合。因為分包的加載是由用戶操作觸發的,並不能確保某分包加載時,另外一個分包就一定存在,這個時候可能會導致 JS 邏輯異常的情況,例如報「"xxx.js" is not defined」這樣的錯誤;
2.一些公共用到的自定義組件,需要放在主包內。
分包的配置
當理清了分包的划分后,就可以進行分包的配置了,這一步並不復雜。
假設支持分包的小程序目錄結構如下:
開發者通過在 app.jsonsubPackages
字段聲明項目分包結構:
分包加載的低版本兼容問題
微信 6.6.0 版本開始支持分包加載,而對於低於這個版本的客戶端,我們做了兼容處理,開發者不需要對老版本微信客戶端做兼容。
對於老版本的客戶端,編譯后台會將所有的分包打包成一個整包,老版本的客戶端依然按照整包的方式進行加載。
所以在老版本的微信客戶端下,是依然采取整包加載的方式加載的,建議開發者盡量控制代碼包的大小。
目前小程序分包大小的限制:
整個小程序所有分包大小不超過 4M
單個分包/主包大小不能超過 2M
隨着時間推移,老版本覆蓋率降低,我們會考慮進一步擴大代碼包的大小。
分包加載的詳細使用方法、示例項目文檔上已有介紹,可查看接口文檔:分包加載
如果其他問題,歡迎在評論區留言。
- END -