一：分包相關(guān)概念

1. 本質(zhì)上是改變項(xiàng)目的路由以及優(yōu)化項(xiàng)目各個(gè)模塊的啟動(dòng)時(shí)間的一種優(yōu)化技術(shù)。

2. 主包與分包的概念

1). 主包：本項(xiàng)目中初始化時(shí)所必須的頁面。

項(xiàng)目在啟動(dòng)時(shí)，將從主包進(jìn)入，分包在用戶未進(jìn)入時(shí)不會(huì)加載，只有在進(jìn)入分包模塊時(shí)才會(huì)加載。
tabbar頁面以及模塊間共有的頁面，如果該項(xiàng)目有賬號(hào)限制(即非注冊(cè)賬號(hào)不可進(jìn)入主界面)，也應(yīng)將登錄頁放置在主包內(nèi)

2). 分包：除主包外的所有頁面都應(yīng)放置在分包內(nèi)，為避免讀者混淆，本文會(huì)將該分包定義為子包

二：為什么要分包

優(yōu)化項(xiàng)目首次啟動(dòng)的下載時(shí)間;小程序默認(rèn)就是整包(主包)下載,但這會(huì)導(dǎo)致整個(gè)項(xiàng)目只有在全部加載完畢后才會(huì)回顯到用戶眼前，這樣雖然可以使用加載動(dòng)畫進(jìn)行優(yōu)化，但也會(huì)有部分可能導(dǎo)致用戶流失；

防止項(xiàng)目超出小程序官方對(duì)小程序項(xiàng)目打包后的大小限制；

若不分包，整個(gè)程序最大限制不能超過2M，分包后，整個(gè)項(xiàng)目(包含主包+子包)最大不能超過16M,單個(gè)包不能超過2M (這樣就規(guī)避了項(xiàng)目最大不得超過2m的限制)

三： 分包基本邏輯

• 靜態(tài)文件：分包下支持 static 等靜態(tài)資源拷貝，即分包目錄內(nèi)放置的靜態(tài)資源不會(huì)被打包到主包中，也不可在主包中使用
• js文件：當(dāng)某個(gè) js 僅被一個(gè)分包引用時(shí)，該 js 會(huì)被打包到該分包內(nèi)，否則仍打到主包（即被主包引用，或被超過 1 個(gè)分包引用）
• 自定義組件：若某個(gè)自定義組件僅被一個(gè)分包引用時(shí)，且未放入到分包內(nèi)，編譯時(shí)會(huì)輸出提示信息

四： 分包步驟詳解

PS: 由于筆者僅做了微信小程序分包，因而以下也僅對(duì)面向微信小程序的uniapp項(xiàng)目有效

PS: 筆者是tabbar頁作為單模塊劃分子包，即每個(gè)tabbar均作為一個(gè)子包模塊

1. （manifest.json ） 開啟分包優(yōu)化

添加相關(guān)字段

// "mp-weixin"
"optimization":{ 
      "subPackages":true //是否啟用分包優(yōu)化
}

2. (pages.json) 聲明項(xiàng)目分包結(jié)構(gòu)

• pages：

原則：pages內(nèi)只允許存放tabbar頁面路由，以及各個(gè)子包所共有的頁面頁面，如果有登錄頁且不登錄無法進(jìn)入主頁面，該登錄頁面路由也應(yīng)放置在pages路由內(nèi)

• subPackages：

定義：?jiǎn)蝹€(gè)模塊內(nèi)的除主包內(nèi)文件的所有的文件，

比如: 假設(shè)一個(gè)tabbar模塊內(nèi)原本有index(tabbar頁).vue,notice.vue,about.vue這三個(gè)頁面，將index.vue這個(gè)頁面路由放置pages.json中的pages數(shù)組內(nèi)，對(duì)應(yīng)的將index.vue放置在項(xiàng)目中的pages目錄內(nèi)
假設(shè)notice.vue與about.vue沒有在別的tabbar模塊中被使用，則應(yīng)該將notice.vue和about.vue兩個(gè)頁面文件放置在subPackages中
若notice.vue與about.vue這兩個(gè)頁面中有被別的模塊使用，則同樣應(yīng)該將其放置在pages主包內(nèi)，為防止其與其他tabbar頁面混淆，應(yīng)該在pages目錄內(nèi)再單獨(dú)開辟一個(gè)目錄專門用于存放共有頁

弄懂了以上原則，接下來便可以實(shí)踐一下了

（pages.json）內(nèi)新增subPackages字段，與pages同級(jí)，同樣是數(shù)組格式，期內(nèi)每一個(gè)對(duì)象均對(duì)應(yīng)tabbar內(nèi)的每一個(gè)模塊，

(項(xiàng)目目錄)每一個(gè)對(duì)象都應(yīng)在項(xiàng)目中生成每一個(gè)目錄，這個(gè)目錄與pages目錄同級(jí)

//pages.json
"pages":[
//這里僅存放tabbar,以及公共頁
],
"subPackages":[
//subPackages數(shù)組里的每一個(gè)對(duì)象都代表了對(duì)應(yīng)tabbar模塊里的除tabbar中index.vue以外所有的頁面，且該數(shù)組里每一個(gè)對(duì)象都在項(xiàng)目目錄中與pages目錄平級(jí)
      //舉個(gè)栗子  這里是首頁模塊，index.vue由于是tabbar頁面，故而被放置在了pages.json中，剩余兩個(gè)文件并沒有被其他tabbar模塊使用，因而被放置在了這里
      {
            "root":"pages_Index", //這里代表根目錄的映射，表示在項(xiàng)目中這個(gè)模塊的根目錄也就是上面說的與pages目錄平級(jí)的目錄名
            "pages":[ // 這里的pages表示分包內(nèi)的頁面，凡在該子包的pages目錄下，均不可被其他子包模塊訪問
                  //這里指的是原本從pages頁中遷移來的，僅本模塊專屬的頁面，其格式規(guī)范遵循tabbar所在pages數(shù)組規(guī)范
                  {
                         // 網(wǎng)上有人說path路徑必須由pages_Index根目錄開始，但是在實(shí)踐過程中發(fā)現(xiàn)不從根目錄開始也可以，原因猜測(cè)是root本身已定義了根目錄
                         // 原目錄為： /pages_index/packet/notice
			path":"packet/notice", 
			"style": {
				"navigationBarTitleText": "我是子包文件"
			}
		 },                 
            ]
      
      }


]

目錄結(jié)構(gòu)如下：

pages.json如下：

這樣便完成了配置的第二步

3. 更換各個(gè)頁面路由

筆者之前一直強(qiáng)調(diào)的分包越早越好的原因就在于此，一但項(xiàng)目到了微信2m限制，則會(huì)直接導(dǎo)致項(xiàng)目無法在開發(fā)者工具中運(yùn)行，雖然分包可以在整個(gè)項(xiàng)目周期任一進(jìn)度進(jìn)行，但是需花費(fèi)的時(shí)間是與項(xiàng)目進(jìn)度是成正比的，即項(xiàng)目進(jìn)度越到尾期，則分包需要花費(fèi)的時(shí)間也就越長，筆者對(duì)此深有體會(huì)(流眼淚.jpg)
如果在項(xiàng)目中末期才進(jìn)行分包，此時(shí)需要開發(fā)者站在整個(gè)項(xiàng)目角度上，對(duì)每個(gè)模塊，每個(gè)頁面，每個(gè)網(wǎng)絡(luò)請(qǐng)求都要了然于胸，可以借助于思維導(dǎo)圖工具，將項(xiàng)目所有模塊所有頁面都列出來，剔除tabbar頁面和模塊間共有頁面，然后將剩余頁面填充至指定子包目錄下，并在subPackages目錄下聲明該頁面路徑，并且，開發(fā)者必須要重新定義路由跳轉(zhuǎn)路徑以及組件引入方式，這一點(diǎn)極為繁瑣，且極易出錯(cuò)造成損失，因而建議開發(fā)者在走這一步前預(yù)先做好備份。

導(dǎo)入組件路徑建議直接更換成以@開頭的絕對(duì)路徑來替換省略號(hào)開頭的相對(duì)路徑，防止以后可能再次發(fā)生的變更

跳轉(zhuǎn)路由也應(yīng)換成絕對(duì)路徑。

在本過程中，可能會(huì)出現(xiàn)各種引用錯(cuò)誤或者無法跳轉(zhuǎn)的問題，此時(shí)需要開發(fā)者心態(tài)平緩，并一定要謹(jǐn)慎檢查

如果在開發(fā)者工具中運(yùn)行整個(gè)項(xiàng)目顯示沒有報(bào)錯(cuò)信息，則可以在真機(jī)調(diào)試，如果有短時(shí)彈框 “ 加載模塊中 ”，則表示分包成功

那么問題來了：我不想用戶看到這幾個(gè)丑陋的字，該怎么做？

出現(xiàn)這幾個(gè)字的原因是由于用戶剛進(jìn)入的界面必定是主包，而在用戶進(jìn)入分包的時(shí)候，由于分包資源還未下載，所以微信官方便貼心的提示用戶正在加載分包資源
筆者：微信我謝謝你呀！(超大聲嗶嗶)
那么接下來要說的，就是關(guān)于這類問題的解決辦法: 分包預(yù)加載

4. （pages.json）實(shí)現(xiàn)分包預(yù)加載

定義：在用戶進(jìn)入某個(gè)頁面時(shí)，同時(shí)靜默下載跟該頁面有關(guān)的子包文件

與subPackages平級(jí)添加preloadRule對(duì)象，
該對(duì)象內(nèi)部的key指的是某個(gè)頁面路徑，也就是當(dāng)用戶進(jìn)入某個(gè)頁面時(shí)，需要預(yù)加載的頁面路徑，
value

//pages.json
//以子包pages_index為例
"subPackages":[
//分包模塊
      {
            "root" : "pages_index",
            "pages" : [
                {
                   "path" : "packet/notice",
                   "style" : { "navigationBarTitleText": "我是子包頁面"}
                }  
            ]
      }
],
"preloadRule" :{
      "pages/index/index":{ //要進(jìn)行預(yù)加載時(shí)用戶要進(jìn)入的頁面路徑
            "network":"all", // 什么網(wǎng)絡(luò)下支持允許預(yù)加載，默認(rèn)wifi:   wifi/all
            "packages":["pages_Index"] // 要進(jìn)行預(yù)加載的子包名
	},
}

一點(diǎn)提示：筆者個(gè)人認(rèn)為這一項(xiàng)有好有壞，因?yàn)楫?dāng)開啟這一項(xiàng)時(shí)，代表著要占用當(dāng)前頁的加載資源速度來換取用戶可能要加載的加載頁速度，這與使用分包來降低白屏?xí)r間的原則格格不入，因而這一點(diǎn)需要開發(fā)者根據(jù)需求仔細(xì)考慮是否值得
如果配置成功，開發(fā)者console控制臺(tái)會(huì)輸出以下信息：

4. 幾點(diǎn)原則

1. 主包可以引用分包內(nèi)文件，分包僅可引用自身目錄內(nèi)的文件，分包與分包間文件無法互相引用，

2. 要清楚的是分包是一種不得已而為之的手段，確保在分包前項(xiàng)目中靜態(tài)資源已優(yōu)化完畢，且沒有大量注釋或無用代碼也是一種手段