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 叭

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

點擊原文就好啦~

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。