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

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

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

一、為什么要分包

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

二、主包和分包

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

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

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

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

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

三、原始配置

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

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

{
	"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",	//配置頁面路徑
			"style": {
				"navigationBarTitleText": "首頁",	//導(dǎo)航欄標(biāo)題文字內(nèi)容
				"enablePullDownRefresh": false	//是否開啟下拉刷新: 默認(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": "購物車",
				"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 的列表，詳見 list 屬性說明，最少2個(gè)、最多5個(gè) tab
			{
				"pagePath": "pages/index/index",	//頁面路徑，必須在 pages 中先定義
				"iconPath": "static/tabBar/home.png",	//圖片路徑
				"selectedIconPath": "static/tabBar/home-active.png",	//選中時(shí)的圖片路徑
				"text": "首頁"		//tab 上按鈕文字，在 App 和 H5 平臺為非必填。例如中間可放一個(gè)沒有文字的+號圖標(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": "購物車"
			},
			{
				"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àn)閞oot已經(jīng)選中了文件夾，所以我們只要填寫文件名就好
				"style": {
					"navigationBarTitleText": "",
					"enablePullDownRefresh": false
				}
			},
			{
				"path": "tab",
				"style": {
					"navigationBarTitleText": "",
					"enablePullDownRefresh": false
				}
			}
		]
	}]
}

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

{
	// 分包預(yù)載配置
	"preloadRule": {
		// 當(dāng)我們進(jìn)入了pages/index/index頁面以后就會預(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ù)下載分包
		}
	}
}

這樣我們分包就配置好了