小程序的包被限制在2M以下, 超出的時(shí)候點(diǎn)擊預(yù)覽户盯, 發(fā)現(xiàn)報(bào)錯(cuò):
Error: 代碼包大小為 3701 kb端壳,上限為 2048 kb拒垃,請刪除文件后重試
解決方法:
優(yōu)化代碼沼溜, 刪除掉不用的代碼
圖片壓縮或上傳服務(wù)器
一般圖片所占空間較大,盡量不要放在小程序本地文件夾中,如果圖片不多我們也可以對圖片進(jìn)行壓縮,我經(jīng)常使用的圖片壓縮平臺:點(diǎn)擊這里;
也可以將圖片上傳到服務(wù)器上耕蝉,進(jìn)行外鏈引用, 我們使用的是阿里云oss存儲夜只, 另外也可以通過圖片托管平臺對圖片進(jìn)行托管垒在, 我找到的的圖片托管平臺:點(diǎn)擊此處;
另外扔亥, 通過cli命令創(chuàng)建的uni app項(xiàng)目场躯,可將圖片或字體圖標(biāo)放入assets文件夾下,通過require引入旅挤, 也可減少主包大小
- 分包加載
官方推出小程序分包加載這一功能踢关,對于萬千小程序開發(fā)者來說這無疑是天大的喜訊,關(guān)于如何分包粘茄,微信官方文檔已經(jīng)解釋的十分清楚签舞,在進(jìn)行分包之前建議認(rèn)真閱讀官方文檔。
對于用戶來說,小程序的加載流程變成了:
1儒搭,首次啟動撒会,加載小程序主包,顯示主包內(nèi)的頁面
2师妙,如果用戶進(jìn)入了某個(gè)分包的頁面,再加載這個(gè)對應(yīng)分包屹培,顯示分包的頁面
采用分包加載默穴,對于開發(fā)者而言,能使小程序有更大的代碼體積褪秀,承載更多的功能和服務(wù)蓄诽,對于用戶而言,可以更快的打開小程序媒吗,同時(shí)再不影響啟動速度的前提下使用更多功能仑氛。
分包的劃分:
在配置前首先需要開發(fā)者規(guī)劃下各個(gè)分包需要容納的內(nèi)容,建議開發(fā)者按照功能劃分的原則闸英,將同一個(gè)功能下的頁面和邏輯放置于同一個(gè)目錄下锯岖,對于一些跨功能之間的公共邏輯,將其放置于主包下甫何,這樣可以確保在分包引用這部分功能時(shí)出吹,這部分的邏輯一定存在。
在分包劃分時(shí)辙喂,應(yīng)該注意以下事項(xiàng):
1捶牢,避免分包與分包之間引用上的耦合。因?yàn)榉职募虞d是用戶操作觸發(fā)的巍耗,并不能確保其分包加載時(shí)秋麸,
另一個(gè)分包就一定存在,這個(gè)時(shí)候可能導(dǎo)致js邏輯異常炬太,某些資源找不到的錯(cuò)誤灸蟆;
2,一些公共用到的自定義組件亲族,需要放在主包內(nèi)次乓;
3,使用小程序自帶的tab切換時(shí)孽水,list中的頁面需要放在主包內(nèi)票腰。
分包的配置:(微信客戶端 6.6.0,基礎(chǔ)庫 1.7.3 及以上版本開始支持女气。)
當(dāng)理清了分包的劃分后杏慰,就可以進(jìn)行分包的配置了,這一步并不復(fù)雜。
假設(shè)支持分包的小程序目錄結(jié)構(gòu)如下:
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
開發(fā)者通過在 app.jsonsubPackages字段聲明項(xiàng)目分包結(jié)構(gòu):
{
"pages":[
"pages/index",
"pages/logs"
],
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"name": "pack2",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
目前小程序分包大小有以下限制:
整個(gè)小程序所有分包大小不超過 20M
單個(gè)分包/主包大小不能超過 2M
低版本兼容:
由微信后臺編譯來處理舊版本客戶端的兼容缘滥,后臺會編譯兩份代碼包轰胁,一份是分包后代碼,另外一份是整包的兼容代碼朝扼。 新客戶端用分包赃阀,老客戶端還是用的整包,完整包會把各個(gè) subpackage 里面的路徑放到 pages 中擎颖。
示例項(xiàng)目:
接下來簡單介紹一下在不同框架中的使用:
1榛斯、在uni app中:
uni app通過cli初始化的小程序目錄結(jié)構(gòu)如下:
├── src
├── main.js
├── App.vue
├── pages.json
├── manifest.json
├── orderPackages
│ └── pages
│ ├── goodsDetail
│ └── myorder
├── pages
│ ├── index
│ └── user
└── utils
需在pages.json中配置 subPackages 字段::
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首頁"
}
},
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "個(gè)人中心"
}
}
],
"subPackages": [{
"root": "orderPackages",
"pages": [{
"path": "pages/goodsDetail/goodsDetail",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/myorder/myorder",
"style": {
"navigationBarTitleText": "我的訂單"
}
}
]
}]
}
在頁面中跳轉(zhuǎn)分包頁面路徑:
uni.navigateTo({
url: `/orderPackages/pages/order/order`
})
2、在taro中:
taro初始化的小程序目錄結(jié)構(gòu)如下:
├── src
├── app.js
├── app.scss
├── index.html
├── packageA
│ └── pages
│ ├── goodsDetail
│ └── myorder
├── pages
│ ├── index
│ └── user
└── utils
需在app.js中配置 subPackages 字段:
config = {
pages: [
'pages/index/index',
'pages/user/user'
],
subPackages: [
{
'root': 'packageA',
'pages': [
'pages/goodsDetail/goodsDetail',
'pages/myorder/myorder'
]
}
]
}
在頁面中跳轉(zhuǎn)分包頁面路徑:
taro.navigateTo({
url: `/orderPackages/pages/order/order`
})
以上只羅列了uni app和taro框架分包加載的步驟搂捧, 原生小程序分包方法根據(jù)官方文檔即可快速實(shí)現(xiàn)驮俗,小程序框架雖多, 大都大同小異允跑,如果后續(xù)有使用其他框架進(jìn)行開發(fā)王凑,會進(jìn)行補(bǔ)充。