手把手教你uniapp和小程序分包(圖文)
一、小程序分包
每個使用分包小程序必定含有一個主包。所謂的主包,即放置默認(rèn)啟動頁面/TabBar 頁面,以及一些所有分包都需用到公共資源/JS 腳本;而分包則是根據(jù)開發(fā)者的配置進(jìn)行劃分。
在小程序啟動時,默認(rèn)會下載主包并啟動主包內(nèi)頁面,當(dāng)用戶進(jìn)入分包內(nèi)某個頁面時,客戶端會把對應(yīng)分包下載下來,下載完成后再進(jìn)行展示
目前小程序分包大小有以下限制:
- 整個小程序所有分包大小不超過 20M
- 單個分包/主包大小不能超過 2M
對小程序進(jìn)行分包,可以優(yōu)化小程序首次啟動的下載時間,以及在多團(tuán)隊共同開發(fā)時可以更好的解耦協(xié)作。
二、uniapp分包小程序
App默認(rèn)為整包。兼容小程序的分包配置。其目的不用于下載提速,而用于首頁是vue時的啟動提速。
這是我分包小程序之后的目錄結(jié)構(gòu)
- components:公共組件(供主包引用)
- page_后跟拼音的都是分包
- 分包里的components是單個分包自己的組件目錄,分包vue頁面的引用只能是在自己page_zhaoshang分包目錄下才可以引用
- pages是主包,里面都是啟動頁面/TabBar 頁面
- static里放的是公共靜態(tài)資源,圖片類
分包步驟:
1.配置manifest.json
"mp-weixin": { "optimization":{"subPackages":true} }
優(yōu)化分包:
在對應(yīng)平臺的配置(manifest.json)下添加"optimization":{"subPackages":true}
開啟分包優(yōu)化
目前只支持mp-weixin
、mp-qq
、mp-baidu
的分包優(yōu)化
- 靜態(tài)文件:分包下支持 static 等靜態(tài)資源拷貝,即分包目錄內(nèi)放置的靜態(tài)資源不會被打包到主包中,也不可在主包中使用
- js文件:當(dāng)某個 js 僅被一個分包引用時,該 js 會被打包到該分包內(nèi),否則仍打到主包(即被主包引用,或被超過 1 個分包引用)
- 自定義組件:若某個自定義組件僅被一個分包引用時,且未放入到分包內(nèi),編譯時會輸出提示信息
2.配置pages.json
在pages.json中新建數(shù)組"subPackages",數(shù)組中包含兩個參數(shù):1.root:為子包的根目錄,2.pages:子包由哪些頁面組成,參數(shù)同pages;
注意:主包和分包是不能再同一目錄下,在構(gòu)建uniapp項目時,可以考慮一下目錄結(jié)構(gòu),以便后期進(jìn)行分包;
3.分包預(yù)載配置(preloadRule)
做這一步主要為了優(yōu)化速度,不想優(yōu)化速度的可以跳過這個配置
配置preloadRule后,在進(jìn)入小程序某個頁面時,由框架自動預(yù)下載可能需要的分包,提升進(jìn)入后續(xù)分包頁面時的啟動速度
preloadRule
中,key
是頁面路徑,value
是進(jìn)入此頁面的預(yù)下載配置,每個配置有以下幾項:
字段 | 類型 | 必填 | 默認(rèn)值 | 說明 |
---|---|---|---|---|
packages | StringArray | 是 | 無 | 進(jìn)入頁面后預(yù)下載分包的 root 或 name。__APP__ 表示主包。 |
network | String | 否 | wifi | 在指定網(wǎng)絡(luò)下預(yù)下載,可選值為:all(不限網(wǎng)絡(luò))、wifi(僅wifi下預(yù)下載) |
app的分包,同樣支持preloadRule,但網(wǎng)絡(luò)規(guī)則無效。
例子:
到此這篇關(guān)于手把手教你uniapp和小程序分包(圖文)的文章就介紹到這了,更多相關(guān)uniapp和小程序分包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js禁止查看源文件屏蔽Ctrl+u/s、F12、右鍵等兼容IE火狐chrome
最近想給JS特效與模板預(yù)覽頁面加上屏蔽查看源文件,防治整理不易的源碼被輕易拿走,發(fā)現(xiàn)IE、火狐、chrome等各類瀏覽器支持不一樣。下面是腳本之家整理的一些屏蔽總結(jié)2020-10-10layui 選擇列表,打勾,點擊確定返回數(shù)據(jù)的例子
今天小編就為大家分享一篇layui 選擇列表,打勾,點擊確定返回數(shù)據(jù)的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS插件clipboard.js實現(xiàn)一鍵復(fù)制粘貼功能
這篇文章主要介紹了JS插件clipboard.js實現(xiàn)一鍵復(fù)制粘貼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-08-08javascript利用apply和arguments復(fù)用方法
這篇文章主要介紹了javascript利用apply和arguments復(fù)用方法,有需要的朋友可以參考一下2013-11-11網(wǎng)頁前端登錄js按Enter回車鍵實現(xiàn)登陸的兩種方法
下面小編就為大家?guī)硪黄W(wǎng)頁前端登錄js按Enter回車鍵實現(xiàn)登陸的兩種方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05