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 叭

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/203612.html

標籤：JavaScript

上一篇：新手入門前端，應該知道HTML框架排版標記標簽大全

下一篇：JS代碼下載百度文庫純文本檔案

基于uni-app的微信小程式之分包