最近工作在(zài)接觸uni-app,用它來(lái)開發微信小程序,也(yě)是(shì)第一次接觸,找了(le／liǎo)很久,還有大(dà)佬用自己寫的(de)函數做的(de),俺覺得我不(bù)會也(yě)不(bù)配,剛好看到(dào)下面評論是(shì)官方也(yě)支持了(le／liǎo),所以(yǐ)就(jiù)用官方的(de)了(le／liǎo),這(zhè)裏記錄一下

1. 關于(yú)分包

? 好像是(shì)規定小程序不(bù)能超過2M,一旦超過就(jiù)需要(yào / yāo)分包,因爲(wéi / wèi)是(shì)公司項目,肯定超過,所以(yǐ)就(jiù)做個(gè)演示,權當記錄吧

1.0 這(zhè)是(shì) 官方文檔

1.1 注意事項

1. subPackages 裏的(de)pages的(de)路徑是(shì) root 下的(de)相對路徑，不(bù)是(shì)全路徑。
2. 微信小程序每個(gè)分包的(de)大(dà)小是(shì)2M，總體積一共不(bù)能超過16M。
3. 百度小程序每個(gè)分包的(de)大(dà)小是(shì)2M，總體積一共不(bù)能超過8M。
4. 支付寶小程序每個(gè)分包的(de)大(dà)小是(shì)2M，總體積一共不(bù)能超過4M。
5. QQ小程序每個(gè)分包的(de)大(dà)小是(shì)2M，總體積一共不(bù)能超過24M。
6. 分包下支持獨立的(de) static 目錄，用來(lái)對靜态資源進行分包。
7. uni-app内支持對微信小程序、QQ小程序、百度小程序分包優化，即将靜态資源或者js文件放入分包内不(bù)占用主包大(dà)小。詳情請參考：關于(yú)分包優化的(de)說(shuō)明
8. 針對vendor.js過大(dà)的(de)情況可以(yǐ)使用運行時(shí)壓縮代碼
   • HBuilderX創建的(de)項目勾選運行-->運行到(dào)小程序模拟器-->運行時(shí)是(shì)否壓縮代碼
   • cli創建的(de)項目可以(yǐ)在(zài)pacakge.json中添加參數--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的(de)微信小程序項目

? 這(zhè)裏假設你有了(le／liǎo),原始項目結構

? 用微信開發工具打開的(de)樣子(zǐ),沒有分包之(zhī)前

2.2 在(zài)pages同級創建分包

2.3 pages.json配置

?

?

2.4 然後呢,官網支持了(le／liǎo) 分包優化

• 在(zài)對應平台的(de)配置下添加"optimization":{"subPackages":true}開啓分包優化
• 目前隻支持mp-weixin、mp-qq、mp-baidu的(de)分包優化
• 分包優化具體邏輯：
  • 靜态文件：分包下支持 static 等靜态資源拷貝，即分包目錄内放置的(de)靜态資源不(bù)會被打包到(dào)主包中，也(yě)不(bù)可在(zài)主包中使用
  • js文件：當某個(gè) js 僅被一個(gè)分包引用時(shí)，該 js 會被打包到(dào)該分包内，否則仍打到(dào)主包（即被主包引用，或被超過 1 個(gè)分包引用）
  • 自定義組件：若某個(gè)自定義組件僅被一個(gè)分包引用時(shí)，且未放入到(dào)分包内，編譯時(shí)會輸出(chū)提示信息

我的(de)理解呢就(jiù)是(shì),既然你分包了(le／liǎo)功能模塊,那相應的(de)靜态資源你得分吧,用圖片的(de)時(shí)候直接是(shì)分包下的(de)路徑,這(zhè)才是(shì)個(gè)完整的(de)分包.

這(zhè)裏我以(yǐ)微信小程序爲(wéi / wèi)例,

2.5 怎麽跳轉呢?

在(zài)需要(yào / yāo)點擊跳轉的(de)地(dì / de)方就(jiù)好啦

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

2.6 然後重啓微信開發工具運行

可以(yǐ)看到(dào)已經分包成功

最後上(shàng)個(gè)演示GIF 叭