因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据pages.json的配置进行划分。现在目前微信支持每个包是2M,记住是单个包不能超过2M,总包不超过16M,有部分小程序收到微信邀请测试总包上限提至20M。
假设目录结构为:

1.配置manifest.json
"mp-weixin": {
"optimization":{"subPackages":true}
}
2.配置pages.json
在pages.json中新建数组"subPackages",数组中包含两个参数:1.root:为子包的根目录,2.pages:子包由哪些页面组成,参数同pages;值得注意是主包和分包是不能再同一目录下,所以在构建项目时,可以考虑一下目录结构,以便后期进行分包;

3.分包预载配置(preloadRule)
在pages.json中配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度;preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:

举个栗子🌰:

4.附上最终分包pages.json

注意:旧项目使用分包时,建议分包完成后,把dist包删除,清除微信开发者工具的缓存,且重启微信开发者工具;以免缓存导致各种问题;最后附上uni-app官方分包文档链接:https://uniapp.dcloud.io/collocation/pages?id=subpackages
网友评论