小程序分包Error: 分包大小超过限制,main package source

问题：

1、根据开发需求，项目基础模块开发完成后，在微信开发者工具上预览正常，点击"预览"的时候，提示分包大小超过限制。

如图：

上官网查了下，目前小程序分包大小有以下限制：

请参考：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

（1） 整个小程序所有分包大小不超过 8M。
（2）单个分包/主包大小不能超过 2M。

解决：

根据官网给出的参考，把目前在使用的小程序的页面，按模块进行分包加载。

请参考：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html

用法：

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

{
  "pages":[
    "pages/hospital/hospital",
    "pages/mine/mine",
    ......
  ],
  "subPackages": [ //分包
    {
      "root": "packageA",
      "pages": [
        "mine/login/login",
        "mine/patientManager/patientManager",
        ......
      ]
    }, {
      "root": "packageB",
      "pages": [
        "mine/myOrder/myOrder",
        "mine/myConcern/myConcern",
        ......
      ]
    }
  ]
}

简单分包完了之后，重新点击"预览"，发现能正常预览了，"上传"也正常。

2、项目后期又新增了功能模块，虽然页面并没有添加在主包的模块上，但点击"预览"的时候又提示分包大小超过限制了，在微信开发者工具的详情里查看了本地代码的大小，很无奈的又超了很多，但看页面大小也就几K、几字节的样子。

后来发现是新增的图片问题，其中好些图片都过大，单一张图片就有好些超过100k的。

因为很多静态资源共用，就没有把静态资源分包，而新增的功能又加了新的图片，所以预览的时候又提示分包大小超过限制了。

解决：

1、将要求不那么高的图片，尽可能的压缩。（但过分压缩图片会造成图片的失真）
2、将一些图片上传到服务器，在代码中加载服务器的网络图片。（不能保证从服务器拉取的资源能快速加载）
3、不共用的图片资源，打包成不同的分包，按需加载。（最推荐）

图片处理过后，就可以愉快的"上传"和"预览"了。

注意：

1、声明 subPackages 分包后，一些页面的跳转路径也要修改，比如原来是在pages下的，移到子包pagesA下了，路径肯定变了，记得修改。

2、声明 subPackages 分包后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目录将被打包到 app（主包） 中。

3、声明 subPackages 分包后，每个包里的静态资源文件是相对封闭的，不能相互引用，比如 packageA 无法require packageB的JS 文件，也无法import packageB的template，但可以使用app下的JS 文件、template和文件的。

4、声明 subPackages 分包后，packageA 和packageB 是都可以使用 app（主包）内的静态资源的。

5、每个包定义的root字段是独立的，subPackage 的根目录不能是另外一个 subPackage 内的子目录。

6、tabBar 页面必须在 app（主包）内。

总结：

这也是我在项目开发中遇到的坑，开发过半的时候才发现代码包的大小超出了限制，而且很多静态资源文件也不适合放在开发服务器上，最终还是使用选择分包。即便是分包加载，也会存在大小限制的问题，所以在开发时还是要避免这类问题。