前言

??緣由

該大的不大，小程序包超出2M，無法上傳發(fā)布

前段時間項(xiàng)目迭代時，因版本大升級，導(dǎo)致uniapp打包后小程序后，包體積大于2M。雖然將圖片等靜態(tài)資源壓縮，體積大的資源放置cdn，在不懈的努力下，治標(biāo)不治本，包體積還是不聽話的長到2M以上。憋的實(shí)在沒辦法，遂將小程序分包，徹底解除封印，特來跟大家分享下如何將小程序分包，減小主包大小。

??主要目標(biāo)

實(shí)現(xiàn)2大重點(diǎn)

1. 如何進(jìn)行小程序分包
2. 如個根據(jù)分包調(diào)整配置文件

??猜你想問

如何與狗哥聯(lián)系進(jìn)行探討

關(guān)注公眾號【JavaDog程序狗】

公眾號回復(fù)【入群】或者【加入】，便可成為【程序員學(xué)習(xí)交流摸魚群】的一員，問題隨便問，牛逼隨便吹。

此群優(yōu)勢：

1. 技術(shù)交流隨時溝通
2. 任何私活資源免費(fèi)分享
3. 實(shí)時科技動態(tài)搶先知曉
4. CSDN資源免費(fèi)下載
5. 本人一切源碼均群內(nèi)開源，可免費(fèi)使用

2.踩踩狗哥博客

javadog.net

大家可以在里面留言，隨意發(fā)揮，有問必答

??猜你喜歡

文章推薦

【項(xiàng)目實(shí)戰(zhàn)】SpringBoot+uniapp+uview2打造H5+小程序+APP入門學(xué)習(xí)的聊天小項(xiàng)目
【項(xiàng)目實(shí)戰(zhàn)】SpringBoot+uniapp+uview2打造一個企業(yè)黑紅名單吐槽小程序
【模塊分層】還不會SpringBoot項(xiàng)目模塊分層？來這手把手教你！
【ChatGPT】手摸手，帶你玩轉(zhuǎn)ChatGPT
【ChatGPT】SpringBoot+uniapp+uview2對接OpenAI，帶你開發(fā)玩轉(zhuǎn)ChatGPT

正文

??三個問題

1. 為什么小程序會有2M的限制？

1. 用戶體驗(yàn)：小程序要求在用戶進(jìn)入小程序前能夠快速加載，以提供良好的用戶體驗(yàn)。限制小程序的體積可以確保小程序能夠在較短的時間內(nèi)下載和啟動，避免用戶長時間的等待。
2. 網(wǎng)絡(luò)條件：考慮到不同地區(qū)和網(wǎng)絡(luò)條件的差異，限制小程序的體積可以確保在低速網(wǎng)絡(luò)環(huán)境下也能夠較快地加載和打開小程序，提供更廣泛的用戶覆蓋。
3. 設(shè)備存儲：一些用戶使用的設(shè)備可能存儲空間有限，限制小程序的體積可以確保小程序可以在這些設(shè)備上正常安裝和運(yùn)行。

2. 如何解決包過大問題？

1. 優(yōu)化代碼，刪除掉不用的代碼
2. 圖片壓縮或者上傳服務(wù)器
3. 分包加載

3. 什么是分包加載？

小程序一般都是由某幾個功能組成，通常這幾個功能之間是獨(dú)立的，但會依賴一些公共的邏輯，且這些功能一般會對應(yīng)某幾個獨(dú)立的頁面。那么小程序代碼的打包，可以按照功能的劃分，拆分成幾個分包，當(dāng)需要用到某個功能時，才加載這個功能對應(yīng)的分包。

??實(shí)操分包步驟

1.查看項(xiàng)目結(jié)構(gòu)

通過上方三個問題，我們開始具體分包流程，首先看一下分包前項(xiàng)目結(jié)構(gòu)及pages.json配置文件

pages.json
{
	"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/card/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/device/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/order/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/product/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

2.分析主包大小

微信開發(fā)者工具中，查看【詳情】進(jìn)行分析，此處本地代碼只有一個主包大小399.8KB

3.參考文檔

本文以uniapp為實(shí)操介紹案例

小程序官方文檔：

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

uniapp 分包文檔：

https://uniapp.dcloud.net.cn/collocation/pages.html#subpackages

4. 結(jié)構(gòu)調(diào)整

將咱們項(xiàng)目結(jié)構(gòu)按照如下圖所示進(jìn)行拆分

新建subPages_A 和 subPages_B，將pages下不同頁面移入進(jìn)新增的兩個包，此處subPages_A的名字只做示例，實(shí)際要按照標(biāo)準(zhǔn)命名！

比較下之前項(xiàng)目結(jié)構(gòu)，此處項(xiàng)目會報錯，不用擔(dān)心，稍后修改pages.json

5. 修改pages.json

根據(jù)上一步拆分的包路徑，進(jìn)行配置文件的調(diào)整，此處注意"subPackages" 要和 "pages" 同級

{
	"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"subPackages": [{
		"root": "pages/subPages_A",
		"pages": [{
				"path": "card/index",
				"style": {
					"navigationBarTitleText": "card"
				}
			},
			{
				"path": "device/index",
				"style": {
					"navigationBarTitleText": "device"
				}
			}
		]
	}, {
		"root": "pages/subPages_B",
		"pages": [{
				"path": "order/index",
				"style": {
					"navigationBarTitleText": "order"
				}
			},
			{
				"path": "product/index",
				"style": {
					"navigationBarTitleText": "product"
				}
			}
		]
	}],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

這里的意思是將主包拆成subPages_A和subPages_B兩個子包，對比下之前的配置

6. 啟動測試

啟動后查看微信開發(fā)者工具，查看【詳情】可看到主包大小降為326.0kb，并且下方還有subPages_A和subPages_B兩個子包

比較之前包大小，分包成功！

7. 特別注意

?? 如果設(shè)計代碼中路徑問題，需要調(diào)成最新包結(jié)構(gòu)路徑。例如

拆包前跳轉(zhuǎn)到對應(yīng)設(shè)備頁面

uni.navigateTo({
	url:'/pages/device/index'
})

拆包后跳轉(zhuǎn)到對應(yīng)設(shè)備頁面

uni.navigateTo({
	url:'/pages/subPages_A/device/index'
})

切記如果拆包后所有路徑問題需要統(tǒng)一修改，否則則會報錯?。?！

總結(jié)

本文通過實(shí)際demo進(jìn)行uniapp小程序拆包，通過分析項(xiàng)目主包大小，查看官方文檔，按照功能劃分進(jìn)行子包拆分，如果還有博友存在疑問或者不理解可以在上方與本狗聯(lián)系，或者查看本狗發(fā)布在上方的代碼，希望可以幫到大家。文章來源地址http://www.zghlxwxcb.cn/news/detail-668185.html

到了這里，關(guān)于【小程序分包】小程序包大于2M，來這教你分包啊的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！