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",
  });
}

最后

以上就是分包优化和游客模式的主要内容，有不足之处，请多多指正。