问题来源
最近在接手个需求, 因业务比较独立, 跟同事2人开发没提前商量好分包规则, 故建了个分包A跟分包B, 其中A跟B均有个列表组件, UI层90%都一致, 故想复用大部分的样式(即复用wxss), 但发现没法引用分包A的资源, 那要怎么处理呢?
解决方案
- 1.将该wxss放在主包内;
- 2.考量下能否合并两个分包, 这样就可以使用自己分包的内容; 针对这个需求, 我这边采用的方案2, 大家可根据实际情况去选择不同方案.
你以为到这里就结束了吗, 肯定没有的啊, 如果你对小程序分包感兴趣, 请往下看看!
何谓主包、分包
整个小程序所有分包大小不超过20M;单个分包/主包大小不能超过 2M
- 主包:
a. 放置默认启动页面&&tabBar页面, 以及一些分包需要用到的公共资源(如wxss、js、wxs、component、图片、template);
b. 主包资源(如wxss、js、wxs、component、图片、template)是全局的, 主包和子包都能引用; - 分包:
a. 根据开发者配置来划分, 主要避免分包过大没法上传、小程序启动时间过长;
b. 分包相当于有自己独立的作用域, 只能使用自己的或主包的资源, But不能使用其他子包的资源;
为什么需要分包?
微信小程序主包大小必须控制在2M以内 微信小程序包大小必须控制在2M以内,启动时, 默认下载主包&启动主包内页面;若超过该大小在微信开发者工具都不能正常预览,同时也会影响小程序的首次启动时间.故随着业务的不断庞大, 分包加载就变得很有必要了.
如何查看包大小呢?在这里, 我们还能单独查看各个分包的大小.
分包加载
分包加载: 将小程序划分成不同的子包, 在构建时打包成不同的分包, 用户在使用时才按需加载(进入分包内某个页面, 客户端把对应分包代码下载下来, 下载完成即可进行展示),以此来优化小程序首次启动的下载时间.
subpackages(subPackages)字段定义分包, 接收数组, 数组的每个元素代表一个包.
- root: 当前包的根目录(根路径的相对路径), 必须是独立的,即a的根目录不能在b的子目录中;
- pages: 当前包下的页面路径
Tips:
a. subpackages配置路径外的目录会被打包到主包中
b. tabBar的页面必须配置在主包内
如何实现分包?
1.建立分包目录subpages, 新建2个分包目录packA、packB.
你以为页面建好了, 就能在自定义编译条件中找到该启动页面直接启动吗, 答案是否定的,请走2.
2.在app.json配置如下代码.
{
"pages": [
"pages/test/test"
],
"subpackages": [
{
"root": "subpages/packA",
"pages": [
"pages/index"
]
}
],
"style": "v2",
"sitemapLocation": "sitemap.json"
}
配置好上述代码后，才能在这里看到该启动页面,如下.
某一分包被下载时, 若主包不存在, 则getApp()也不存在, 那么此时调用getApp()获取到的就是undefined,故主包跟当前页面所在分包都会被下载.
Tips: 分包之间的页面跳转跟主包是一样的,无区别.
分包如何划分?
- 按照业务逻辑划分
可直接在app.json中配置分包信息, 保存后会自动生成对应目录.(所持的文件都是初始的状态) - 除tabBar之外的页面全部做成分包
这也是网上看到的建议之一, 这样既解决了启动的问题, 也可以避免主包过大的问题. 具体如何划分分包、可依据项目实际情况去选择。
写在最后
若有错误之处, 恳请留言, 定会及时更正!
若觉着对您有帮助的话恳请点个赞或着收藏吧!
