小程序之分包加载

相信开发小程序的童鞋一定会为官方的小程序包大小不得超过2M这一限制而头疼不已，好不容易爬坑出来，到了提交发布代码这关键一步，却因为代码体积超限迫使含辛茹苦撸出的小程序胎死腹中...啊，多么痛的领悟~
还好，现如今官方推出小程序分包加载这一共功能，对于万千小程序开发者来说这无疑是天大的喜讯，废话不多说，动手之前建议认真阅读官方文档，以避免不必要的“趟坑之旅”，现罗列以下几点与诸位共勉：

环境要求

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

如何分包

在构建小程序分包项目时，构建会输出一个或多个功能的分包，其中每个分包小程序必定含有一个主包，所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本，而分包则是根据开发者的配置进行划分。

目前小程序分包大小有以下限制：
整个小程序所有分包大小不超过 8M
单个分包/主包大小不能超过 2M

在小程序启动时，默认会下载主包并启动主包内页面，如果用户需要打开分包内某个页面，客户端会把对应分包下载下来，下载完成后再进行展示。对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

使用方法

假设支持分包的小程序目录结构如下：

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在 app.json subPackages 字段声明项目分包结构：

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

打包原则

声明 subPackages 后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目录将被打包到 app（主包）中
app（主包）也可以有自己的 pages（即最外层的 pages 字段）
subPackage 的根目录不能是另外一个 subPackage 内的子目录
首页的 TAB 页面必须在 app（主包）内

引用原则

packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件
packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源

低版本兼容

由微信后台编译来处理旧版本客户端的兼容，后台会编译两份代码包，一份是分包后代码，另外一份是整包的兼容代码。新客户端用分包，老客户端还是用的整包，完整包会把各个 subpackage 里面的路径放到 pages 中。

有坑请绕行

网上找资源的时候发现一篇博客写转转小程序实战分包加载的，其中有提到历史入口兼容的问题：

一个页面放入分包之后，路径会发生变化，例如详情页由/pages/detail变为/subPages/trade/detail，意味着如果用户访问了以前的page则得不到正确的页面响应（例如：分享出去的小程序卡片、二维码、公众号推送消息等），这些静态不可改变的历史入口怎么办？我们目前采用如下方案：
原来主包内的每个页面都保留，但代码只保留跳转逻辑，用户进来后立即跳到对应的分包页面，用户几乎是无感知的。这样也会产生一点小问题：这些跳转页面也占用一定的空间，接下来我们会优化成在onLaunch、页面跳转时进行判断，直接跳入正确的分包页面。

以上都是说的用原生的方法开发小程序，但是现如今小程序业务日益复杂，相信用原生的开发已经不能满足大多数开发者的需要了。据我观察美团的mpvue和腾讯的wepay框架应该是星星比较多，知名度也比较高的了，如若有朋友发现其他优秀的框架，盼望周知分享！如果你的项目是基于mpvue框架的，要改成分包加载需要修改一些配置，具体请查看github上mpvue的Issues，小编也尚在技术调研阶段，接下来也会按照上述文档尝试修改，然后记录分享分享给大家，后会有期~