uni-app做微信小程序的分包處理方法
我們的都知道微信小程序有隨即隨用,用完即走的優(yōu)點,并且它開發(fā)門檻低,但是它也有一個致命的缺點,就是代碼包體積的限制,這一缺點讓小程序的開發(fā)有了一定的限制,現(xiàn)在有一方法可以減少代碼包的體積,能夠讓小程序的功能得到一定的擴展,這一方法就是——分包。
一、分包是什么
分包指的是把一個完整的小程序項目,按照不同的需求劃分為不同的子包,在構建時打包成不同的分包,用戶在瀏覽時按需加載。這樣,在小程序啟動的時候,默認會先下載主包并啟動主包內的內面,當用戶進入分包內的某個頁面時,客戶端再把對應的分包下載下來,下載完成之后再進行顯示。
二、如何進行分包
1. 配置
需要在 pages.json 文件中添加 subPackages 屬性進行配置,如下所示:
{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首頁" } }, ], // 分包處理 "subPackages": [ { "root": "packageA", "pages": [ { "path": "" } ] }, { "root": "packageB", "pages": [ { "path": "" } ] } ] }
root:分包的根路徑;
name:分包別名,分包預加載的時候使用;
page:分包頁面路徑,相對于分包根節(jié)點的路徑(與外層的pages用法相同);
independent:分包是否獨立分包;
2. 分包后的文件列表
3. 打包原則
- 按 subPackages 配置路徑進行打包,此路徑之外的目錄會被打包到主包中
- subpackage 的根目錄不能是另一個 subpackage 內的子目錄
- tabbar 頁面必須在主包內
4. 引用原則
- packageA 無法 require packageB JS 文件,但可以 require app、自己 package 內的 JS 文件
- packageA 無法 import packageB 的 template,但可以 require app、自己 package 內的 template
- packageA 無法使用 packageB 的資源,但可以使用 app、自己 package 內的資源。
三、獨立分包和普通分包
獨立分包是小程序中一種特殊類型的分包,可以獨立于主包和其他分包運行。從獨立分包中的頁面進入小程序時,不需要下載主包,只有當用戶進入普通分包或主包內的頁面時,主包才會被下載。
independent 屬性來判斷分包是不是獨立分包,獨立分包不依賴主包就可以運行,可以很大程度上提升分包頁面的啟動速度。
獨立分包如下所示:
// 分包處理 "subPackages": [ { "root": "moduleA", "pages": [ { "path": "" } ], "independent": true // 獨立分包 }, ]
四、分包預加載
分包預加載行為是在進入某個頁面時觸發(fā),通過在 pages.json 文件中添加 preloadRule 屬性來配置,如下所示:
{ "subPackages": [ { "root": "packageA", "name": "pack1", // 預加載時使用 "pages": [] }, { "root": "packageB", "name": "pack2", // 預加載時使用 "pages": [] }, ], // 預加載 "preloadRule": { "pages/index": { "network": "", "packages": ["pack1"] // 在 pages/index 頁面中預加載名為 pack1 分包內容 } } }
preloadRule 中,key 是頁面路徑,value 是進入此頁面需要預加載的配置;
value 配置中的 network 是指定在什么網(wǎng)絡下預加載(all 表示不限網(wǎng)絡、wifi 僅無限網(wǎng)絡下預加在),packages 是指在 key 頁面時需要預加在的分包(用分包中的 root 或 name 屬性表示,_APP_ 代表主包);
五、主包分包限制
整個小程序所有分包大小不超過 20M。
單個分包 / 主包大小不能超過 2M。
到此這篇關于uni-app做微信小程序的分包處理的文章就介紹到這了,更多相關uni-app小程序分包內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
BootStrap中關于Select下拉框選擇觸發(fā)事件及擴展
Select下拉框的問題,想在選擇一個選項后,前臺顯示做出變動,并且知道選擇的是第幾個選項。 怎么解決這個問題呢?下面小編給大家?guī)砹薆ootStrap中關于Select下拉框選擇觸發(fā)事件及擴展,需要的朋友參考下吧2016-11-11javascript 瀏覽器類型和版本號檢測代碼(兼容多瀏覽器)
果對javascript了解不是特別深入的話,很容易就會寫出不兼容的代碼(就像我),這時候就得判斷瀏覽器了。比如事件偵聽、一些鼠標和鍵盤事件、Range等,一些都會不一樣.下面列出幾種常用的檢測瀏覽器方法,以饗觀眾!2010-04-04MC Dialog js彈出層 完美兼容多瀏覽器(5.6更新)
MC.Dialog 是由肖毅(YesSky) 開發(fā)一款界面絢麗美觀 操作簡單易用的一款js彈出層 MC.Dialog 是經(jīng)過嚴格了測試的 兼容目前ie7+ 以及其他非ie核心的瀏覽器 完美模擬瀏覽器自帶對話框功能2010-05-05JS控制只能輸入數(shù)字并且最多允許小數(shù)點兩位
這篇文章主要介紹了JS控制只能輸入數(shù)字并且最多允許小數(shù)點兩位,本文給大家提到js如何限制input輸入框只能輸入數(shù)字問題,需要的朋友可以參考下2019-11-11比JSON.stringify快兩倍的fast-json-stringify性能對比分析
這篇文章主要為大家介紹了比JSON.stringify快兩倍的fast-json-stringify性能對比分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12