快捷導(dǎo)航

uniapp分包(小程序分包)處理圖文詳解

更新時(shí)間：2023年01月15日 11:06:05 作者：佐武

小程序上傳的時(shí)候,主包不能超過(guò)2M,如果超出,則會(huì)上傳失敗,這時(shí)候就需要把界面進(jìn)行分包,下面這篇文章主要給大家介紹了關(guān)于uniapp分包(小程序分包)處理的相關(guān)資料,需要的朋友可以參考下

一、為什么要分包

因小程序有體積和資源加載限制，優(yōu)化小程序的下載和啟動(dòng)速度。

二、主包和分包

所謂的主包，即放置默認(rèn)啟動(dòng)頁(yè)面/TabBar 頁(yè)面，以及一些所有分包都需用到公共資源/JS 腳本；而分包則是根據(jù)pages.json的配置進(jìn)行劃分。

在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁(yè)面，當(dāng)用戶進(jìn)入分包內(nèi)某個(gè)頁(yè)面時(shí)，會(huì)把對(duì)應(yīng)分包自動(dòng)下載下來(lái)，下載完成后再進(jìn)行展示。此時(shí)終端界面會(huì)有等待提示。

App默認(rèn)為整包。從uni-app 2.7.12+ 開(kāi)始，也兼容了小程序的分包配置。其目的不用于下載提速，而用于首頁(yè)是vue時(shí)的啟動(dòng)提速。App下開(kāi)啟分包，除在pages.json中配置分包規(guī)則外，還需要在manifest中設(shè)置在app端開(kāi)啟分包設(shè)置，詳見(jiàn)：uni-app官網(wǎng)

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

微信小程序每個(gè)分包的大小是2M，總體積一共不能超過(guò)20M。
百度小程序每個(gè)分包的大小是2M，總體積一共不能超過(guò)8M。
支付寶小程序每個(gè)分包的大小是2M，總體積一共不能超過(guò)8M。
QQ小程序每個(gè)分包的大小是2M，總體積一共不能超過(guò)24M。
字節(jié)小程序每個(gè)分包的大小是2M，總體積一共不能超過(guò)16M（字節(jié)小程序基礎(chǔ)庫(kù) 1.88.0 及以上版本開(kāi)始支持，字節(jié)小程序開(kāi)發(fā)者工具請(qǐng)使用大于等于 2.0.6 且小于 3.0.0 的版本）

三、原始配置

首先我們來(lái)看一下正常的配置和目錄，當(dāng)前添加了tabBar表現(xiàn)，這里我們只添加了四個(gè)

當(dāng)前還沒(méi)有配置分包的pages.json文件

{
	"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",	//配置頁(yè)面路徑
			"style": {
				"navigationBarTitleText": "首頁(yè)",	//導(dǎo)航欄標(biāo)題文字內(nèi)容
				"enablePullDownRefresh": false	//是否開(kāi)啟下拉刷新: 默認(rèn)為false
			}
		}, 
		{
			"path": "pages/car/car",
			"style": {
				"navigationBarTitleText": "訂單",
				"enablePullDownRefresh": false
			}
		}, 
		{
			"path": "pages/mine/mine",
			"style": {
				"navigationBarTitleText": "我的",
				"enablePullDownRefresh": false
			}
		}, 
		{
			"path": "pages/order/order",
			"style": {
				"navigationBarTitleText": "購(gòu)物車(chē)",
				"enablePullDownRefresh": false
			}
		}
	],
	"tabBar":{	//設(shè)置底部 tab 的表現(xiàn)
		"color": "#909399",		//tab 上的文字默認(rèn)顏色
		"selectedColor": "#303133",		//tab 上的文字選中時(shí)的顏色
		"backgroundColor": "#e5e5e5",	//tab 的背景色
		"borderStyle":"white",		//tabbar 上邊框的顏色，可選值 black/white，也支持其他顏色值
		"list": [	//tab 的列表，詳見(jiàn) list 屬性說(shuō)明，最少2個(gè)、最多5個(gè) tab
			{
				"pagePath": "pages/index/index",	//頁(yè)面路徑，必須在 pages 中先定義
				"iconPath": "static/tabBar/home.png",	//圖片路徑
				"selectedIconPath": "static/tabBar/home-active.png",	//選中時(shí)的圖片路徑
				"text": "首頁(yè)"		//tab 上按鈕文字，在 App 和 H5 平臺(tái)為非必填。例如中間可放一個(gè)沒(méi)有文字的+號(hào)圖標(biāo)
			},
			{
				"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": "購(gòu)物車(chē)"
			},
			{
				"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文件夾下創(chuàng)建一個(gè)subPack(不限制文件夾名稱)文件夾，在subPack文件夾下創(chuàng)建tab文件和list文件

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

{
    //分包加載配置，此配置為小程序的分包加載機(jī)制。
	"subPackages": [{
		"root": "pages/subPack", //子包的根目錄
		"pages": [{ //這里的配置路徑和pages里的一樣
				"path": "list", //配置頁(yè)面路徑，這里要注意，因?yàn)閞oot已經(jīng)選中了文件夾，所以我們只要填寫(xiě)文件名就好
				"style": {
					"navigationBarTitleText": "",
					"enablePullDownRefresh": false
				}
			},
			{
				"path": "tab",
				"style": {
					"navigationBarTitleText": "",
					"enablePullDownRefresh": false
				}
			}
		]
	}]
}

這樣我們分包就配置好了但是如果我們想進(jìn)一步提升分包的啟動(dòng)速度的話需要做分包預(yù)加載處理

{
	// 分包預(yù)載配置
	"preloadRule": {
		// 當(dāng)我們進(jìn)入了pages/index/index頁(yè)面以后就會(huì)預(yù)下載pages/subPack分包
		"pages/index/index": {
			"network": "all",	//在指定網(wǎng)絡(luò)下預(yù)下載，可選值為：all（不限網(wǎng)絡(luò)）、wifi（僅wifi下預(yù)下載）
			"packages": ["pages/subPack"]	//進(jìn)入頁(yè)面后預(yù)下載分包
		}
	}
}

這樣我們分包就配置好了