0. 緣由
最近工作在接觸uni-app,用它來開發微信小程序,也是第一次接觸,找了很久,還有大佬用自己寫的函數做的,俺覺得我不會也不配,剛好看到下面評論是官方也支持了,所以就用官方的了,這里記錄一下
1. 關於分包
好像是規定小程序不能超過2M,一旦超過就需要分包,因為是公司項目,肯定超過,所以就做個演示,權當記錄吧
1.0 這是 官方文檔
1.1 注意事項
subPackages里的pages的路徑是root下的相對路徑，不是全路徑。- 微信小程序每個分包的大小是2M，總體積一共不能超過16M。
- 百度小程序每個分包的大小是2M，總體積一共不能超過8M。
- 支付寶小程序每個分包的大小是2M，總體積一共不能超過4M。
- QQ小程序每個分包的大小是2M，總體積一共不能超過24M。
- 分包下支持獨立的
static目錄，用來對靜態資源進行分包。uni-app內支持對微信小程序、QQ小程序、百度小程序分包優化，即將靜態資源或者js文件放入分包內不占用主包大小。詳情請參考：關於分包優化的說明- 針對
vendor.js過大的情況可以使用運行時壓縮代碼
HBuilderX創建的項目勾選運行-->運行到小程序模擬器-->運行時是否壓縮代碼cli創建的項目可以在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 首先你得有個uniapp的微信小程序項目
這里假設你有了,原始項目結構
用微信開發工具打開的樣子,沒有分包之前
2.2 在pages同級創建分包
2.3 pages.json配置
2.4 然后呢,官網支持了 分包優化
- 在對應平台的配置下添加
"optimization":{"subPackages":true}開啟分包優化- 目前只支持
mp-weixin、mp-qq、mp-baidu的分包優化- 分包優化具體邏輯：
- 靜態文件：分包下支持 static 等靜態資源拷貝，即分包目錄內放置的靜態資源不會被打包到主包中，也不可在主包中使用
- js文件：當某個 js 僅被一個分包引用時，該 js 會被打包到該分包內，否則仍打到主包（即被主包引用，或被超過 1 個分包引用）
- 自定義組件：若某個自定義組件僅被一個分包引用時，且未放入到分包內，編譯時會輸出提示信息
我的理解呢就是,既然你分包了功能模塊,那相應的靜態資源你得分吧,用圖片的時候直接是分包下的路徑,這才是個完整的分包.
這里我以微信小程序為例,
2.5 怎么跳轉呢?
在需要點擊跳轉的地方就好啦
uni.navigateTo({
url: '/myPackageA/pages/piece/piece'
})
2.6 然后重啟微信開發工具運行
可以看到已經分包成功
最后上個演示GIF 叭
