我們的都知道微信小程序有隨即隨用，用完即走的優(yōu)點(diǎn)，并且它開發(fā)門檻低，但是它也有一個致命的缺點(diǎn)，就是代碼包體積的限制，這一缺點(diǎn)讓小程序的開發(fā)有了一定的限制，現(xiàn)在有一方法可以減少代碼包的體積，能夠讓小程序的功能得到一定的擴(kuò)展，這一方法就是——分包。

一、分包是什么

分包指的是把一個完整的小程序項(xiàng)目，按照不同的需求劃分為不同的子包，在構(gòu)建時(shí)打包成不同的分包，用戶在瀏覽時(shí)按需加載。這樣，在小程序啟動的時(shí)候，默認(rèn)會先下載主包并啟動主包內(nèi)的內(nèi)面，當(dāng)用戶進(jìn)入分包內(nèi)的某個頁面時(shí)，客戶端再把對應(yīng)的分包下載下來，下載完成之后再進(jìn)行顯示。

二、如何進(jìn)行分包

1. 配置

需要在 pages.json 文件中添加 subPackages 屬性進(jìn)行配置，如下所示：

{
	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首頁"
			}
		},
	],
    // 分包處理
	"subPackages": [
		{
			"root": "packageA",
			"pages": [
				{
					"path": ""
				}
			]
		},
		{
			"root": "packageB",
			"pages": [
				{
					"path": ""
				}
			]
		}
	]
}

root：分包的根路徑；

name：分包別名，分包預(yù)加載的時(shí)候使用；

page：分包頁面路徑，相對于分包根節(jié)點(diǎn)的路徑（與外層的pages用法相同）；

independent：分包是否獨(dú)立分包；

2. 分包后的文件列表

 3. 打包原則

• 按 subPackages 配置路徑進(jìn)行打包，此路徑之外的目錄會被打包到主包中
• subpackage 的根目錄不能是另一個 subpackage 內(nèi)的子目錄
• tabbar 頁面必須在主包內(nèi)

4. 引用原則

• packageA 無法 require packageB JS 文件，但可以 require app、自己 package 內(nèi)的 JS 文件
• packageA 無法 import packageB 的 template，但可以 require app、自己 package 內(nèi)的 template
• packageA 無法使用 packageB 的資源，但可以使用 app、自己 package 內(nèi)的資源。

三、獨(dú)立分包和普通分包

獨(dú)立分包是小程序中一種特殊類型的分包，可以獨(dú)立于主包和其他分包運(yùn)行。從獨(dú)立分包中的頁面進(jìn)入小程序時(shí)，不需要下載主包，只有當(dāng)用戶進(jìn)入普通分包或主包內(nèi)的頁面時(shí)，主包才會被下載。

independent 屬性來判斷分包是不是獨(dú)立分包，獨(dú)立分包不依賴主包就可以運(yùn)行，可以很大程度上提升分包頁面的啟動速度。

獨(dú)立分包如下所示：

// 分包處理
"subPackages": [
	{
		"root": "moduleA",
		"pages": [
			{
				"path": ""
			}
		],
        "independent": true // 獨(dú)立分包
	},
	
]	

四、分包預(yù)加載

分包預(yù)加載行為是在進(jìn)入某個頁面時(shí)觸發(fā)，通過在 pages.json 文件中添加 preloadRule 屬性來配置，如下所示：

{
    "subPackages": [
        {
            "root": "packageA",
            "name": "pack1",  // 預(yù)加載時(shí)使用
            "pages": []
        },
        {
            "root": "packageB",
            "name": "pack2",  // 預(yù)加載時(shí)使用
            "pages": []
        },
    ],
    // 預(yù)加載
    "preloadRule": {
        "pages/index": {
            "network": "",
            "packages": ["pack1"]  // 在 pages/index 頁面中預(yù)加載名為 pack1 分包內(nèi)容
        }
    }
}

preloadRule 中，key 是頁面路徑，value 是進(jìn)入此頁面需要預(yù)加載的配置；

value 配置中的 network 是指定在什么網(wǎng)絡(luò)下預(yù)加載（all 表示不限網(wǎng)絡(luò)、wifi 僅無限網(wǎng)絡(luò)下預(yù)加在），packages 是指在 key 頁面時(shí)需要預(yù)加在的分包（用分包中的 root 或 name 屬性表示，_APP_ 代表主包）；

五、主包分包限制

整個小程序所有分包大小不超過 20M。

單個分包 / 主包大小不能超過 2M。

到此這篇關(guān)于uni-app做微信小程序的分包處理的文章就介紹到這了,更多相關(guān)uni-app小程序分包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論