【uniapp】小程序开发：3 分包配置

顽石九变2023-09-21 14:26

分包加载配置，此配置为小程序的分包加载机制。

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

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

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

1、修改manifest.json文件，添加配置

json 复制代码

/* 小程序特有相关 */
"mp-weixin" : {
    "appid" : "xxx",
    /* 启用分包配置 */
    "optimization": {
        "subPackages": true
    },
    "runmode" : "liberate" // 开启分包优化后，必须配置资源释放模式
},

2、在pages.json中配置subPackages

这里是path是相对于root的路径，且分包pages2不能和主包page一致，就是说这里root不能配置成pages

json 复制代码

"subPackages": [{
	"root": "pages2",
	"pages": [
		{
			"path": "login/login",
			"style": {
				"navigationBarTitleText": "登录"
			}
		}]
}],

3、在页面中使用

分包页面一样可以通过uni.navigateTo({ url: '/pages2/login/login' })跳转到对应的页面

注意:

App开启分包后，每个分包单独编译成一个js文件(都包含在app内，不会联网下载)，当App首页是vue时，可减小启动加载文件大小，提升启动速度。

首页是nvue时，分包不会提升启动速度，nvue本身启动速度就快于vue，也快于开启分包后的首页为vue的应用。如果追求极致启动速度，还是应该使用nvue做首页并在manifest开启fast模式。

App页面较少时，分包对启动速度的优化不明显。