最近正在做一个微信小程序的前端,后面可能会持续的把遇到的问题以及相关的解决方案写成博客作为记录。
本次的任务是对微信小程序进行分包,本文会从三个问题出发以解释清楚小程序里“分包”这个概念
什么是分包?
在软件开发中,包通常是指把相关代码、资源、文件组织在一起的一种形式。以便于程序的分发、部署以及应用。而微信小程序中的分包是指将小程序的代码、资源分割成多个包的技术。在工程实践中,一般是按照处理的业务的不同来将相应的代码、资源进行分割。
一般来讲,微信小程序中包含两种类型的包:主包和分包。
主包:用户打开小程序时,第一个加载的是主包。主包的内容有小程序的基础框架、启动逻辑和一些基本页面。如果主包非常精简的话,那么小程序的启动速度也会很快。
分包:分包是由部分功能模块、页面或资源所独立打包成的一个或多个包,他们会在被使用的时候动态的加载,这样避免了一开始就加载所有的内容,提高了小程序的启动速度。
为什么要分包?
进行分包最重要的原因是微信对小程序包的大小进行了限制:
- 单个包不超过2M
- 所有的包大小的总和不超过20M
其他原因:
- 访问到特定的模块或页面时才会动态加载需要的包,这提高了小程序的启动速度,降低了流量消耗。
- 分包可以促使开发者更好的管理代码的结构,提高了代码的可读性以及可扩展性。以及使开发团队的成员更专注于自己的模块,提高开发效率。
如何进行分包?
本项目使用的是uniapp进行小程序的开发,因此下面的内容都是只针对于uniapp中的分包操作
Step 1: 物理上进行分包,把不同的模块移入不同的文件夹中
在项目根目录下创建一个文件夹pages2,将要分出来的模块放入该文件夹下。
Step 2: 配置pages.json文件
注意:pages.json文件中的第一个pages数组中存放的是主包中的内容,就是tabBar中的页面(tabBar中的页面不能放到分包中)
在pages数组同级的位置补充分包配置:
"subPackage": [{
"root": "pages2",
"pages": [{
"page" : "subPackage/subPackage", //查找的是pages2/subPackage下的subPackage
"style": {
"navigationBarTitleText": "分包",
"enablePullDownRefresh": false
}
}]
}],