uniapp 分包

微信官网分包原则

一、为什么要分包

因小程序有体积和资源加载限制，优化小程序的下载和启动速度。

二、主包和分包

主包：即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；
分包：是根据pages.json的配置进行划分。

加载小程序的时候先加载主包，当需要访问分包的页面时候才加载分包内容
分包的页面可以访问主包的文件，数据，图片等资源

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。

三、配置pages.json

在pages.json中新建数组"subPackages"，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成，参数同pages；

注意：主包和分包是不能再同一目录下，在构建uniapp项目时，可以考虑一下目录结构，以便后期进行分包；

四、 注意事项：

整个小程序所有分包大小不超过 20M
单个分包/主包大小不能超过 2M

1、合理规划分包，开始时就细分分包，尽量少在主包放大文件
2、减少项目的层级，合理归分层级，同时可以提高项目的运行速度
3、静态资源全部cdn加载
4、公共组件库
5、公共CSS库，尽量做到一次代码多次使用，避免重复多余的CSS
6、使用稳定全面的UI库，可以大幅度减少CSS的用量
7、外部较大的js文件，尽量减少使用，非用不可的话全部放到分包里去加载使用
8、主包不可以引用分包内文件，分包仅可引用自身目录内的文件，分包与分包间文件无法互相引用
9、要清楚的是分包是一种不得已而为之的手段，确保在分包前项目中静态资源已优化完毕，且没有大量注释或无用代码也是一种手段
10、静态资源尽量放到服务器上 和公司后端人员沟通 将图片地址尽量放到服务器上 就不占用本地资源空间

五、目录搭建

components:公共组件（供主包引用）
page_后跟拼音的都是分包
分包里的components是单个分包自己的组件目录，分包vue页面的引用只能是在自己page_zhaoshang分包目录下才可以引用
pages是主包，里面都是启动页面/TabBar 页面
static里放的是公共静态资源，图片类

---

六、demo

目录

page.json

	"subPackages": [{
		"root": "page_work",	子包的根目录
		"pages": [
			{
				"path": "index",//配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
				"style": {
					"navigationBarTitleText": "分包",
					"enablePullDownRefresh": false
				}
			}
		]
	}],

manifest.json–>源码视图