uni-app 微信小程序分包優化

一、優化方案

1、開啟--minimize壓縮模式（針對vendor.js過大的情況可以使用運行時壓縮代碼）

• HBuilderX創建的項目勾選運行-->運行到小程序模擬器-->運行時是否壓縮代碼
• cli創建的項目可以在package.json中添加參數--minimize，示例：

"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

2、讓分包的依賴就打包在分包里，別打包到主包里，其實只要添加一個配置及可以了。

打開manifest.json,在“mp-weixin”里添加代碼，添加后，記得一定要重新運行項目，才看到效果，單單靠熱更新是不行的！！！

"optimization":{ 
        "subPackages":true
   }

 3、分包設置

一、分包注意事項

• 微信小程序每個分包的大小是2M，總體積一共不能超過20M。所以需要分包管理文件 。
• 主包：放置默認啟動頁面/TabBar 頁面，以及一些所有分包都需用到公共資源/JS 腳本；
• 分包：是根據pages.json的配置進行划分。
• 在小程序啟動時，默認會下載主包並啟動主包內頁面，當用戶進入分包內某個頁面時，會把對應分包自動下載下來，下載完成后再進行展示。
• 靜態文件：分包下支持 static 等靜態資源拷貝，即分包目錄內放置的靜態資源不會被打包到主包中，也不可在主包中使用。
• js文件：當某個 js 僅被一個分包引用時，該 js 會被打包到該分包內，否則仍打到主包（即被主包引用，或被超過 1 個分包引用）
• 自定義組件：若某個自定義組件僅被一個分包引用時，且未放入到分包內，編譯時會輸出提示信息

二、分包使用方法：

假設支持分包的 uni-app 目錄結構如下：

┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─pagesA   
│  ├─static
│  └─list
│     └─list.vue 
├─pagesB    
│  ├─static
│  └─detail
│     └─detail.vue  
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json          

則需要在 pages.json 中填寫

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }, {
        "path": "pages/login/login",
        "style": { ...}
    }],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }],
    "preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }
}

三、分包跳轉

在需要點擊跳轉的地方：

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