0. 緣由

最近工作在接觸uni-app,用它來(lái)開(kāi)發(fā)微信小程序,也是第一次接觸,找了很久,還有大佬用自己寫(xiě)的函數(shù)做的,俺覺(jué)得我不會(huì)也不配,剛好看到下面評(píng)論是官方也支持了,所以就用官方的了,這里記錄一下

1. 關(guān)于分包

好像是規(guī)定小程序不能超過(guò)2M,一旦超過(guò)就需要分包,因?yàn)槭枪卷?xiàng)目,肯定超過(guò),所以就做個(gè)演示,權(quán)當(dāng)記錄吧

1.0 這是?官方文檔

1.1 注意事項(xiàng)

subPackages?里的pages的路徑是?root?下的相對(duì)路徑，不是全路徑。

微信小程序每個(gè)分包的大小是2M，總體積一共不能超過(guò)16M。

百度小程序每個(gè)分包的大小是2M，總體積一共不能超過(guò)8M。

支付寶小程序每個(gè)分包的大小是2M，總體積一共不能超過(guò)4M。

QQ小程序每個(gè)分包的大小是2M，總體積一共不能超過(guò)24M。

分包下支持獨(dú)立的?static?目錄，用來(lái)對(duì)靜態(tài)資源進(jìn)行分包。

uni-app內(nèi)支持對(duì)微信小程序、QQ小程序、百度小程序分包優(yōu)化，即將靜態(tài)資源或者js文件放入分包內(nèi)不占用主包大小。詳情請(qǐng)參考：關(guān)于分包優(yōu)化的說(shuō)明

針對(duì)?vendor.js過(guò)大的情況可以使用運(yùn)行時(shí)壓縮代碼

• HBuilderX創(chuàng)建的項(xiàng)目勾選?運(yùn)行-->運(yùn)行到小程序模擬器-->運(yùn)行時(shí)是否壓縮代碼

• cli創(chuàng)建的項(xiàng)目可以在?pacakge.json中添加參數(shù)?--minimize，示例：?"dev:mp-weixin":"cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

2.使用方法

2.1 首先你得有個(gè)uniapp的微信小程序項(xiàng)目

這里假設(shè)你有了,原始項(xiàng)目結(jié)構(gòu)

用微信開(kāi)發(fā)工具打開(kāi)的樣子,沒(méi)有分包之前

2.2 在pages同級(jí)創(chuàng)建分包

2.3?pages.json配置

[^注意]: 這還有個(gè) 分包預(yù)加載 ,去官網(wǎng)看吧 我暫時(shí)沒(méi)用到,聽(tīng)說(shuō)影響性能啥的,但是用戶體驗(yàn)好?

2.4 然后呢,官網(wǎng)支持了?分包優(yōu)化

• 在對(duì)應(yīng)平臺(tái)的配置下添加?"optimization":{"subPackages":true}開(kāi)啟分包優(yōu)化

• 目前只支持?mp-weixin、?mp-qq、?mp-baidu的分包優(yōu)化

• 分包優(yōu)化具體邏輯：

• 靜態(tài)文件：分包下支持 static 等靜態(tài)資源拷貝，即分包目錄內(nèi)放置的靜態(tài)資源不會(huì)被打包到主包中，也不可在主包中使用

• js文件：當(dāng)某個(gè) js 僅被一個(gè)分包引用時(shí)，該 js 會(huì)被打包到該分包內(nèi)，否則仍打到主包(即被主包引用，或被超過(guò) 1 個(gè)分包引用)

• 自定義組件：若某個(gè)自定義組件僅被一個(gè)分包引用時(shí)，且未放入到分包內(nèi)，編譯時(shí)會(huì)輸出提示信息

我的理解呢就是,既然你分包了功能模塊,那相應(yīng)的靜態(tài)資源你得分吧,用圖片的時(shí)候直接是分包下的路徑,這才是個(gè)完整的分包.

這里我以微信小程序?yàn)槔?

2.5 怎么跳轉(zhuǎn)呢?

在需要點(diǎn)擊跳轉(zhuǎn)的地方就好啦

uni.navigateTo({

url: '/myPackageA/pages/piece/piece'

})

2.6 然后重啟微信開(kāi)發(fā)工具運(yùn)行

可以看到已經(jīng)分包成功

最后上個(gè)演示GIF 叭

ps:微信不給傳 但是我的博客有哦~

點(diǎn)擊原文就好啦~

總結(jié)

以上是生活随笔為你收集整理的hbuilderx 小程序分包_基于uniapp的微信小程序之分包的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。