小程序分包优化记录

背景

小程序的业务页面越来越多，一些不常用的页面也放在主包里。后面继续加功能，主包体积就比较紧张了，需要把页面和依赖整理一下。

主要思路：主包保留启动页和 TabBar 页面，其他业务页面按使用情况拆到分包。先看体积，再调整，最后重新打包对比。

1. 看看主包里有什么

在微信开发者工具里看代码依赖分析，先找占空间比较大的部分：

哪些页面放在主包，哪些页面可以移出去
图片、字体有没有放在主包里
第三方库有没有整包引入，或者被多个地方重复引用
有没有不再使用的页面和资源

这里有个地方要注意：页面移到分包，不代表它依赖的东西都会跟着移走。如果首页或者主包里的公共组件还引用着它，相关代码可能仍然会留在主包里。具体还是要看打包后的分析结果。

2. 拆分业务页面

用 uni-app 的话，可以在 pages.json 里配置 subPackages。下面用订单和登录页面举个例子：

{
  "pages": [
    { "path": "pages/index/index" },
    { "path": "pages/user/index" }
  ],
  "subPackages": [
    {
      "root": "pkgOrder",
      "pages": [
        { "path": "detail/index" },
        { "path": "list/index" }
      ]
    },
    {
      "root": "pkgLogin",
      "pages": [
        { "path": "login/index" },
        { "path": "reset/index" }
      ]
    }
  ]
}

pages 里的页面放在主包，subPackages 里按业务目录配置分包。上面只是示例，具体拆哪些页面还是要看项目。

跳转到分包页面时要带上 root，比如订单详情页：

1
2
3

uni.navigateTo({
  url: '/pkgOrder/detail/index'
})

3. 改完路径，要检查页面跳转

页面一移动，引用旧路径的地方也得改。除了页面里的按钮，还要看看有没有这些情况：

登录过期后跳到登录页
登录成功后回到之前的页面
分享出去的页面路径带参数
其他页面直接跳到详情页

登录页放进 pkgLogin 后，也要把登录、退出、重置密码这些流程走一遍。这里的 pkgLogin 是普通分包，名字里有 Login 不代表它就是独立分包。

公共组件和资源也需要检查。普通分包可以使用主包里的公共资源；分包之间如果要共用代码或资源，要结合具体构建方式确认，改完再看产物。

4. 拆完再测一次

重新打包后，看主包和各分包的体积变化，也试一下第一次进入分包页面的速度。主包小了，首次进分包时还是需要下载对应内容，网络慢的时候可能会等一会儿。

如果某个页面后面经常要进入另一个分包，可以考虑用 preloadRule 预下载。这个是为了减少后面进分包的等待，不是配置完首页冷启动就一定会变快，也要考虑流量消耗。