结论：增加了分包加载特性，速度快了很多。修改了用户授权逻辑，使用 open-data 能力改为了完全不用用户授权即可获得昵称头像群名称等。

改版效果

星期六的时候把手边的小程序改为了分包加载。产品是没有提这个需求的，但是心想下次做小程序的需求估计要很久以后了，就星期六加了下班。效果还是很好的。

首屏加载时间由： 7.95s 减少到了 5.00s
平均 cpu 占比右：19.19% 减少到了 4.77%

我并不知道很清楚这个平均 cpu 占比是怎么被算出来的。如果这个数据的变化能够微信团队能够解释的更详细些就好了。

在分包的加载过程中，比如首页是一个 packageA，到列表页是一个 packageB, 这个过程在第一次访问列表页的时候，会再去下载代码。微信在这个过程中帮助了开发者显示了提示：类似于页面加载中。这个还是很友好的。

但是使用分包加载给开发者带来的成本也很大，基本上目录都被更改了。结构也被更改了。其实我是觉得如果能够不更改目录，只在 json 里面配置好打包的方案是最好的。其实仔细想想不更改目录也是行的吧？

小程序经历过几次的“改版”，最开始的 pages, 后来的 component, 先在的 subPackage, 虽然一直再变得更好，但是对于一开始就开发小程序的开发者来说，或者至少对我来说，是不那么友好的。以后等这里逐渐更加成熟了，应该会好的。

怎么开发分包加载?

首先开始把目录结构定好，配置在 app.json 里，这个配置实际就是小程序会怎么分包加载。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#3b8cff",
    "backgroundColor": "#3b8cff",
    "navigationBarTitleText": "腾讯充值",
    "navigationBarTextStyle": "light"
  },
  "subPackages": [
	{
      "root": "result",
	  "pages": [
        "pages/result/result"
	  ]
    },
    {
      "root": "userCenter",
	  "pages": [
        "pages/user_center/user_center"
	  ]
    }
  ]
}

如上面的目录结构，除了个人中心以及结果页以外的内容都是会在第一次下载了。待页面跳转到 result 结果页，相关代码才会被下载并加载。

注意由于页面的目录发生了变化，以前如果是通过相对路径引用如 util 里的文件，那么路径都是要更改的。建议这里都使用 /images/a.png or /utils/a.js这种绝对路径比较好。

怎么获得昵称还不需要用户授权？

前天微信发布了新的文章，地址戳这里,里面讲到了：

用户在没有任何操作的情况直接弹出授权的登录方式将逐渐不再支持，受影响的有 wx.getUserInfo 接口，以及 wx.authorize 接口传入 scope=”scope.userInfo” 的情况。

它推荐了两种做法：

1、按钮组件的登录方式，用户主动点击按钮可以拉起用户授权弹框，获取用户头像、昵称等信息；
2、在不获取用户信息的情况下，可展示用户头像昵称。

第一种用于你真的是需要获得到昵称和图标，做一些其他的工作，比如存储的工作。这种情况，开发者是可以得到昵称和图标的值的。但是它也需要用户去触发，比如你点击个人中心的时候，是一个 btn, 这个 button, 会调用 getUserInfo 这种操作。

<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler">微信登录</button>

注意既然还是调用了授权，那么一定还是会弹框提示用户是否允许授权，如果用户拒绝了也是得不到的。

第二种，如果你只是需要用户的昵称和头像展示在页面里，而不是真正的需要获得这些数据存储在某个地方或者向后台接口传递这些值。那么就告别wx.authorize和wx.getUserInfo吧。

我仔细想了下我们的充值页面，存储的都是 openid，没有需要去真正的用到 nickName 和 avatar 这些。只是为了再页面展示而已，所以：

1
2
3

<open-data type="groupName" open-gid="xxxxxx"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>

利用 open-data 既可以完美的解决啦。也可以给它加入 class, 跟正常的 view 是类似的。

这样就完美啦，以后再也不需要用户授权啦。嘿嘿嘿。（产品开心，我也开心）

对了这里注意，open-data 只能在真机上试出来，我的目前版本的开发者工具是展示不出来的。如果你开发者工具上出不来，就试试真机。可能是版本原因。

注意事项

微信 6.6 客户端，1.7.3 及以上基础库开始支持，请更新至最新客户端版本，开发者工具请使用 1.01.1712150 及以上版本

注意这里的分包加载必须在1.7.3及以上开始支持。为了能够在 1.7.3 以下至少页面正常。你可以兼容。或者再微信公众平台后面来设置，最低版本为 1.7.3,这种情况下：

若用户使用的基础库版本低于设置的最低版本要求，则无法正常使用小程序，并提示更新微信版本。

open-data 是在 1.4.4 以上，好像，所以如果你设置了分包加载的，那么这个肯定也没问题啦。

总结

主要是代码目录结构改变了，导致比如以前代码里的 navigateTo({url: '../../result/result'})路径都需要改变，这些话费了时间重构。但是看到结果上是快了这么多的就好。

还有就是为什么 page 里不能用 behavior? 只有 component 里面能用？这个我感觉不太合理。vue 里面每个 page 也是一个 component 来着。

其实插件的功能我也想试试，但是现在还没有想到可以使用的场景。也许是以后可以像交易记录这种做成小程序，别的外部业务就可加了吧？