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