緣由

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

1. 關(guān)于分包

? 好像是規(guī)定小程序不能超過2M,一旦超過就需要分包,因為是公司項目,肯定超過,所以就做個演示,權(quán)當(dāng)記錄吧

1.0 這是 官方文檔

1.1 注意事項

1. subPackages 里的pages的路徑是 root 下的相對路徑，不是全路徑。
2. 微信小程序每個分包的大小是2M，總體積一共不能超過16M。
3. 百度小程序每個分包的大小是2M，總體積一共不能超過8M。
4. 支付寶小程序每個分包的大小是2M，總體積一共不能超過4M。
5. QQ小程序每個分包的大小是2M，總體積一共不能超過24M。
6. 分包下支持獨立的 static 目錄，用來對靜態(tài)資源進(jìn)行分包。
7. uni-app內(nèi)支持對微信小程序、QQ小程序、百度小程序分包優(yōu)化，即將靜態(tài)資源或者js文件放入分包內(nèi)不占用主包大小。
8. 針對vendor.js過大的情況可以使用運行時壓縮代碼
   • HBuilderX創(chuàng)建的項目勾選運行-->運行到小程序模擬器-->運行時是否壓縮代碼
   • cli創(chuà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 首先你得有個uniapp的微信小程序項目

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

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

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

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

• 在對應(yīng)平臺的配置下添加"optimization":{"subPackages":true}開啟分包優(yōu)化
• 目前只支持mp-weixin、mp-qq、mp-baidu的分包優(yōu)化
• 分包優(yōu)化具體邏輯：
  • 靜態(tài)文件：分包下支持 static 等靜態(tài)資源拷貝，即分包目錄內(nèi)放置的靜態(tài)資源不會被打包到主包中，也不可在主包中使用
  • js文件：當(dāng)某個 js 僅被一個分包引用時，該 js 會被打包到該分包內(nèi)，否則仍打到主包（即被主包引用，或被超過 1 個分包引用）
  • 自定義組件：若某個自定義組件僅被一個分包引用時，且未放入到分包內(nèi)，編譯時會輸出提示信息

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

這里我以微信小程序為例,

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

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

        uni.navigateTo({
          url: '/myPackageA/pages/piece/piece'
        })

2.6 然后重啟微信開發(fā)工具運行

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

最后上個演示GIF 叭