小程序分包加载
分包加载的介绍
大部分小程序都会由某几个功能组成,通常这几个功能之间是独立的,但会依赖一些公共的逻辑,并且这些功能通常会对应某几个独立的页面。那么小程序代码的打包,大可不必一定要打成一个,可以按照功能的划分,拆分成几个分包,当需要用到某个功能时,
才加载这个功能对应的分包。
在小程序启动时,默认会下载主包并启动主包内页面,如果用户需要打开分包内某个页面,客户端会把对应分包下载下来,下载完成后再进行展示。
总结如下:
1. 打开小程序,默认先加载主包
2.进入分包页面时,再加载对应分包
采用分包加载,对开发者而言,能使小程序有更大的代码体积,承载更多的功能与服务;而对用户而言,可以更快地打开小程序,同时在不影响启动速度前提下使用更多功能.
分包的划分
在配置前首先需要开发者规划下各个分包需要容纳的内容,我们建议开发者按照功能划分的的原则,将同一个功能下的页面和逻辑放置于同一个目录下,对于一些跨功能之间公共逻辑,将其放置于主包下,这样可以确保在分包引用这部分功能时,这部分的逻辑一定存在。
在分包划分时,应该注意以下事项:
1.避免分包与分包之间引用上的耦合。因为分包的加载是由用户操作触发的,并不能确保某分包加载时,另外一个分包就一定存在,这个时候可能会导致+JS+逻辑异常的情况,例如报「"xxx.js"+is+not+defined」这样的错误;
2.一些公共用到的自定义组件,需要放在主包内.
分包大小限制
特征
-
1.7.3 及以上基础库开始支持,不支持的版本默认使用整包的方式
-
整个小程序所有分包大小不超过 4M,单个分包/主包大小不能超过 2M
-
分包数量目前没有限制,也就是说你可以放N个分包,甚至每个页面一个分包
-
入口页面/TAB页面必须在主包里
关于主包
-
第一次进入小程序,默认下载主包代码
-
分包以外的所有代码,都会被打入主包
-
分包内代码可以引用主包内代码
关于分包
1.因为存在资源依赖关系,微信的机制是先下载主包,后下载分包
2.分包目录不能在主包目录下面
3.分包可以引用自己包内、主包内的资源,不能引用其他分包内的资源
坑
1.小程序的打包机制仅仅是根据文件目录打包,分包内require/import的任何文件,只要不在同一个目录下面,都不会被打进分包,也就是说,类库及一些公共文件,只能放在主包里面,如果主包分包划分不好的话,主包的大小也很难降下来
2.安卓系统进入分包页面时,会出现一个丑陋的系统级的loading层,这一定程度上影响了安卓的体验
历史入口兼容
一个页面放入分包之后,路径会发生变化,例如详情页由/pages/detail变为/subPages/trade/detail,意味着如果用户访问了以前的page则得不到正确的页面响应(例如:分享出去的小程序卡片、二维码、公众号推送消息等),这些静态不可改变的历史入口怎么办?我们目前采用如下方案:
原来主包内的每个页面都保留,但代码只保留跳转逻辑,用户进来后立即跳到对应的分包页面,用户几乎是无感知的
这样也会产生一点小问题:这些跳转页面也占用一定的空间,接下来我们会优化成在onLaunch、页面跳转时进行判断,直接跳入正确的分包页面。
简单的简述
1.首先要配置好打包路径
2.其次subpageage的根目录不能再包含subpageage目录
3.tabBar页面,例如pages/index/index,pages/logs/logs必须在主包内