uniapp-微信小程序分包----步骤图(记录)

一、为什么要分包

项目打包后，发现超2M…（微信小程序每个分包的大小是2M，总体积一共不能超过20M）

二、主包和分包

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

小程序启动时，默认会下载主包并启动主包内页面，当用户点击进入分包内某个页面时，客户端会把对应的分包下载下来，下载完成后再进行展示。

三、我的分包步骤：

1、配置manifest.json

	"mp-weixin": {
    
    
		//开启分包代码
		"optimization": {
    
    
			"subPackages": true
		}
		//这个也挺有用的----开启小程序组件按需注入
		"lazyCodeLoading": "requiredComponents"
	},

如下图：

2、创建子包

在pages同级文件夹下创建一个subPack(文件名你自己起)文件夹，在subPack文件夹下把子包文件放里，我这个项目小，只创建一个子包。

如下图：

3、配置pages.json

在pages.json中新建数组"subPackages"

数组中包含两个参数：

• root：为子包的根目录，
• pages：子包由哪些页面组成，参数同pages；

//代码太长，只复制部分代码-------------------------
"subPackages": [{
    
    
		"root": "subPack", //子包的根目录
		"pages": [{
    
    
				"path": "![在这里插入图片描述](https://img-blog.csdnimg.cn/07d8e2326b5f4a92a728e679a5a491b7.png#pic_center)
/business", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
				"style": {
    
    
					"navigationBarTitleText": "业务",
					"enablePullDownRefresh": false
				}
			},
			{
    
    
				"path": "business/businessLst",
				"style": {
    
    
					"navigationBarTitleText": "业务-人员",
					"enablePullDownRefresh": false
				}
			},
			{
    
    
				"path": "enterprise/enterprise",
				"style": {
    
    
					"navigationBarTitleText": "企业",
					"enablePullDownRefresh": false
				}
			},
			{
    
    
				"path": "enterprise/enterpriseLst",
				"style": {
    
    
					"navigationBarTitleText": "企业-人员",
					"enablePullDownRefresh": false
				}
			},
		]
	}],

如下图：

4.分包预载配置（preloadRule）----优化速度时使用，不需要可不用

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度

vpreloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：

扫描二维码关注公众号，回复： 17250876 查看本文章

字段	类型	必填	默认值	说明
packages	StringArray	是	无	进入页面后预下载分包的 root 或 name。APP 表示主包。
network	String	否	wifi	在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）

// 分包预载配置
"preloadRule": {
    
    
	// 当我们进入了pages/index/index页面以后就会预下载pages/subPack分包
	"pages/index/index": {
    
    
		"network": "all",	//在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）
		"packages": ["subPack"]	//进入页面后预下载分包
	}
}