前端笔记——小程序的分包

小程序分包

关于小程序分包，主要是为了给用户有一个更好的体验。如果没有分包，那么每次访问时在加载页面时就会把整个项目的所有内容加载完再进行显示，这就很影响用户的使用体验。

而分包就可以很好的解决这个问题，这里分为主包和分包。主包主要是放置默认启动项页面以及TabBar，同时还有一些公共资源，图片还有JS脚本这些。分包则是根据项目页面的使用情况进行划分，需要开发者自行配置。

在小程序启动时，默认下载主包的资源并加载主包的页面内容。当进入其他分包的页面内容时，客户端会再根据访问页面情况进行下载分包资源，下载完成后进行其他页面显示，类似于那种按需下载。

这样我们就可以清楚，分包就是为了提高小程序的性能，首次启动的时间。同时，也是给多人开发提供了更好的解耦协作。

小程序分包也有限制，记住就是主包/每个分包的大小不得超过2MB，整个项目所有包的大小好像不能超过16MB。

小程序一般的目录结构是这样的：

创建分包在全局的配置文件(app.json)里面进行操作：

我们所有的分包要放到subpackages属性里面，然后subpackages属性外的目录都会放到主包里面

app.json配置文件添加subpackages节点，分包其实就是懒加载，按需下载页面文件，提高用户体验
"subpackages": [ 这是一个数组
	{
		"root": "根目录分包文件名"  //这是分包的根目录文件名
		"name": "分包别名"			//可以给分包起别名，后续便于区分吧
		"pages": [					//分包根目录下的包文件名，当前文件下存放所有页面的页面路径
			"pages/页面名/页面文件"			//包文件名下的页面文件路径
			"pages/页面名/页面文件"			//这个分包可以放多个页面
		]
	}
	//可放多个分包，还需要分包的话再新加个对象进行分包操作，如上面操作一样
	上面是普通分包，普通分包启动需要依赖先加载主包，下面这个配置是独立分包的配置，
	就是加上一个属性independent，可不依赖主包独立运行
	{
		"root": "根目录分包文件名"  //这是分包的根目录文件名
		"pages": [					//分包根目录下的包文件名
			"pages/页面名/页面文件"			//包文件名下的页面文件路径
			"pages/页面名/页面文件"			//这个分包可以放多个页面，
		]
		"independent": true    //这个属性声明该分包是一个独立分包，
	}
]

另外说明一下分包的使用

分包的引用原则：
1、主包无法使用分包内的私有资源
2、分包之间不能相互引用私有资源
3、但是分包可以引用主包的公共资源
4、特别强调，独立分包不能引用主包的公共资源，这与普通分包有着区别

以下这个XMind思维导图可以加强理解：

分包预下载

这里可以不用看，就是进入某个页面可能会用到某个分包的内容，我们可以先通过预下载分包，方便直接跳转进入这个分包页面的内容，而不用跳转后还要下载。
也是在app.json配置文件里面配置：

在app.json里面添加preloadRule
"preloadRule": { //分包预下载规则配置
	"pages/页面路径": { //触发分包预下载的页面路径，比如tabBar的每个页面呀
		"network": "all" //network是哪个网络下进行预下载，默认值：WiFi
		"pagepacks": ["分包名"]  //可以是root分包名或者name别名
	}
}

分包预下载限制

同一个分包页面享有共同预下载分包的文件大小是2MB