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

问题:

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

如图:
小程序分包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(主包)内。

总结:

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

你可能感兴趣的:(problems,小程序)