uniapp項目實踐總結(二十二)分包優化和遊客模式

導語：這篇主要介紹應用分包和遊客模式相關的內容。

目錄

• 應用分包
• 遊客模式

應用分包

微信對於小程序的打包壓縮後的代碼體積是有限制的，網頁和 APP 也可以適用分包功能，因此需要進行分包添加以及分包優化。

分包添加

在pages.json文件中添加分包的信息。例如：有一個名叫user的分包，裏面有一個文件是index.vue，那麼分包配置就是:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首頁"
      }
    }
  ],
  "subPackages": [
    {
      "root": "user",
      "pages": [
        {
          "path": "index",
          "style": {
            "navigationBarTitleText": "分包首頁"
          }
        }
      ]
    }
  ]
}

配置完成後該文件的訪問地址就是/user/index，其中的user是在根目錄下存放的。

分包優化

添加配置

分包優化的方法是在manifest.json文件中對應的平臺添加以下配置：

例如：mp-weixin平臺下添加分包優化。

{
  "mp-weixin": {
    "optimization": {
      "subPackages": true
    }
  }
}

注意事項

• 目前只支持mp-weixin、mp-qq、mp-baidu、mp-toutiao、mp-kuaishou的分包優化;
• 分包目錄內放置的靜態資源不會被打包到主包中，也不可在主包中使用;
• 當某個 js 僅被一個分包引用時，該 js 會被打包到該分包內，否則仍打到主包（即被主包引用，或被超過 1 個分包引用）;
• 若某個自定義組件僅被一個分包引用時，且未放入到分包內，編譯時會輸出提示信息;

微信小程序

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

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

遊客模式

在一些平臺，比如微信小程序和蘋果 ios 應用商店，上架的應用一定要提供遊客模式纔可以進行審覈通過。

如何實現遊客模式呢，下面就來簡單實現一下。

服務端配置

可以通過動態配置來打開或關閉遊客模式。

例如：默認開啓遊客模式。

{
  "vistor": true
}

客戶端配置

客戶端根據服務端的配置來設置是否開啓遊客模式。

邏輯分析

• 開啓遊客模式後，啓動應用就應該可以進入到應用程序的主頁面，然後可以隨意遊覽和使用，當遇到需要登錄才能訪問的地方，再跳轉到登錄頁面；
• 關閉遊客模式後，啓動應用後需要先登錄賬號，然後纔可以訪問應用內的頁面或者使用應用提供的服務和功能；

設置緩存

啓動應用獲取服務端配置後可以設置緩存數據：

// 接口獲取到的數據
let config = {
  vistor: true,
};
// 存入本地
uni.setStorage("vistor", config.vistor);

獲取緩存

在要訪問的頁面觸發需要登錄才能使用的功能之前，先判斷是否開啓了遊客模式，如開啓再提示並跳轉登錄。

// 獲取本地遊客模式
let vistor = uni.getStorage("vistor");
// 獲取接口，如返回401，則需要登錄
let login = true;
// 遊客模式已開啓並且需要登錄則跳轉登錄界面
if (vistor && login) {
  uni.navigateTo({
    url: "/pages/login",
  });
}

最後

以上就是分包優化和遊客模式的主要內容，有不足之處，請多多指正。