uniapp-微信小程序分包

1.首先在開發者工具中查看當前小程序的大小

在小程序啟動時，默認會下載主包並啟動主包內頁面，當用戶進入分包內某個頁面時，客戶端會把對應分包下載下來，下載完成后再進行展示

目前小程序分包大小有以下限制：

• 整個小程序所有分包大小不超過 20M
• 單個分包/主包大小不能超過 2M

建議一開始就規划好小程序的結構，對小程序進行分包，可以優化小程序首次啟動的下載時間，以及在多團隊共同開發時可以更好的解耦協作。

官方解釋分包

 

2.這里也可以通過點擊代碼依賴分析查看文件具體占用情況

 

3.接下來進行分包配置

pages是主包，其余兩個是我的分包( pages里的第一個入口頁面和tabBar-list里設置的頁面不能放到分包里 )

接着在pages.json配置分包路徑

"subPackages": [{
            "root": "pagesChat",//分包一
            "pages": [ {
                    "path": "test1/test1"
                        }
                         ]
                },
                {
            "root": "pagesSystem",//分包二
            "pages": [{
                    "path": "test2/test2"    
                       }
                         ]
               }]

在主頁面中跳轉分包路徑

uni.navigateTo({
     url: `/pagesChat/test1/test1` })

 

4.運行和發行小程序的區別

如果點擊運行是不會進行代碼壓縮的，通常體積都會比較大，所以建議點擊發行，然后通過開發者工具導入，再進行上傳代碼

發行時或許會出現一下提示：

官方建議是分包引用的組件要放在分包的components內，我個人發現就算不移動好像也不影響功能

 

5.其他優化方法

• 優化代碼， 刪除掉不用的代碼
• 本地數據放到服務器
• 圖片壓縮或上傳服務器

一般圖片所占空間較大，盡量不要放在小程序本地文件夾中，如果圖片不多我們也可以對圖片進行壓縮，壓縮平台：點擊這里；

也可以將圖片上傳到服務器上，進行外鏈引用，可以使用使用第三方雲存儲， 另外也可以通過圖片托管平台對圖片進行托管點擊此處；

另外， 通過cli命令創建的uni app項目，可將圖片或字體圖標放入assets文件夾下，通過require引入， 也可減少主包大小