uniapp分包，小程序分包处理，详解(图解)，手把手从0开始

Posted 2023-03-30 佐武

一、为什么要分包

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

二、主包和分包

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

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

App默认为整包。从uni-app 2.7.12+ 开始，也兼容了小程序的分包配置。其目的不用于下载提速，而用于首页是vue时的启动提速。App下开启分包，除在pages.json中配置分包规则外，还需要在manifest中设置在app端开启分包设置，详见：uni-app官网

目前小程序分包大小有以下限制：

• 微信小程序每个分包的大小是2M，总体积一共不能超过20M。
• 百度小程序每个分包的大小是2M，总体积一共不能超过8M。
• 支付宝小程序每个分包的大小是2M，总体积一共不能超过8M。
• QQ小程序每个分包的大小是2M，总体积一共不能超过24M。
• 字节小程序每个分包的大小是2M，总体积一共不能超过16M（字节小程序基础库 1.88.0 及以上版本开始支持，字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本）

三、原始配置

首先我们来看一下正常的配置和目录，当前添加了tabBar表现，这里我们只添加了四个

当前还没有配置分包的pages.json文件

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		
			"path": "pages/index/index",	//配置页面路径
			"style": 
				"navigationBarTitleText": "首页",	//导航栏标题文字内容
				"enablePullDownRefresh": false	//是否开启下拉刷新: 默认为false
			
		, 
		
			"path": "pages/car/car",
			"style": 
				"navigationBarTitleText": "订单",
				"enablePullDownRefresh": false
			
		, 
		
			"path": "pages/mine/mine",
			"style": 
				"navigationBarTitleText": "我的",
				"enablePullDownRefresh": false
			
		, 
		
			"path": "pages/order/order",
			"style": 
				"navigationBarTitleText": "购物车",
				"enablePullDownRefresh": false
			
		
	],
	"tabBar":	//设置底部 tab 的表现
		"color": "#909399",		//tab 上的文字默认颜色
		"selectedColor": "#303133",		//tab 上的文字选中时的颜色
		"backgroundColor": "#e5e5e5",	//tab 的背景色
		"borderStyle":"white",		//tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值
		"list": [	//tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
			
				"pagePath": "pages/index/index",	//页面路径，必须在 pages 中先定义
				"iconPath": "static/tabBar/home.png",	//图片路径
				"selectedIconPath": "static/tabBar/home-active.png",	//选中时的图片路径
				"text": "首页"		//tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
			,
			
				"pagePath": "pages/car/car",
				"iconPath": "static/tabBar/circle.png",
				"selectedIconPath": "static/tabBar/circle-active.png",
				"text": "订单"
			,
			
				"pagePath": "pages/order/order",
				"iconPath": "static/tabBar/order.png",
				"selectedIconPath": "static/tabBar/order-active.png",
				"text": "购物车"
			,
			
				"pagePath": "pages/mine/mine",
				"iconPath": "static/tabBar/mine.png",
				"selectedIconPath": "static/tabBar/mine-active.png",
				"text": "我的"
			
		]
	,
	"globalStyle": 
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "小小商城",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	,
	"uniIdRouter": 

 四、分包配置步骤

1.在page文件夹下创建一个subPack(不限制文件夹名称)文件夹，在subPack文件夹下创建tab文件和list文件

2.pages.json文件配置以下配置

    //分包加载配置，此配置为小程序的分包加载机制。
	"subPackages": [
		"root": "pages/subPack", //子包的根目录
		"pages": [ //这里的配置路径和pages里的一样
				"path": "list", //配置页面路径，这里要注意，因为root已经选中了文件夹，所以我们只要填写文件名就好
				"style": 
					"navigationBarTitleText": "",
					"enablePullDownRefresh": false
				
			,
			
				"path": "tab",
				"style": 
					"navigationBarTitleText": "",
					"enablePullDownRefresh": false
				
			
		]
	]

 这样我们分包就配置好了但是如果我们想进一步提升分包的启动速度的话需要做分包预加载处理

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

这样我们分包就配置好了

uniapp和小程序如何分包，详细步骤（图解）#yyds干货盘点#

 一、小程序分包

每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

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

目前小程序分包大小有以下限制：

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

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

这里直接点击去看官方的分包教程容易理解

二、uniapp分包小程序

App默认为整包。兼容小程序的分包配置。其目的不用于下载提速，而用于首页是vue时的启动提速。

这是我分包小程序之后的目录结构

​

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

分包步骤：

1.配置manifest.json

"mp-weixin":

"optimization":"subPackages":true

​

优化分包：

在对应平台的配置(manifest.json)下添加"optimization":"subPackages":true开启分包优化

目前只支持mp-weixin、mp-qq、mp-baidu的分包优化

• 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用
• js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
• 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

2.配置pages.json

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

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

​

3.分包预载配置（preloadRule）

做这一步主要为了优化速度，不想优化速度的可以跳过这个配置

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

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

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

app的分包，同样支持preloadRule，但网络规则无效。

例子：

​

最后点击进入uniapp官方文档查看配置项 

最后

如果对您有帮助，希望能给个