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

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

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

一、為什么要分包

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

二、主包和分包

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

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

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

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

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

三、原始配置

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

當前還沒有配置分包的pages.json文件

{
	"pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",	//配置頁面路徑
			"style": {
				"navigationBarTitleText": "首頁",	//導(dǎo)航欄標題文字內(nèi)容
				"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":{	//設(shè)置底部 tab 的表現(xiàn)
		"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文件夾下創(chuàng)建一個subPack(不限制文件夾名稱)文件夾，在subPack文件夾下創(chuàng)建tab文件和list文件

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

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

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

{
	// 分包預(yù)載配置
	"preloadRule": {
		// 當我們進入了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"]	//進入頁面后預(yù)下載分包
		}
	}
}

這樣我們分包就配置好了