• 減少主包體積
  • 為何要減少主包體積
  • 主包里都包含什么內(nèi)容
  • 減少主包體積的方式
  • 方式1：減少主包中包含的頁(yè)面
    • 思考1：主包中應(yīng)該包含什么內(nèi)容呢？
    • 思考2：如何在不影響外部推廣的情況下，剔除主包中的部分頁(yè)面？
      • 注意：
    • 思考3：主包中的內(nèi)容是越少越好么？
    • 思考4：其他的頁(yè)面分成幾個(gè)子包合適？
      • 1、【并行下載子包數(shù)量】
      • 2、【包體積與下載失敗率】
      • 3、【分包頁(yè)面與主包頁(yè)面緊密程度、頁(yè)面入口pv】
  • 方式2：減少自定義組件
    • 1、減少共用的自定義組件
    • 2、減少非共用的自定義組件
• 方式3：優(yōu)化公共資源
  • 1、優(yōu)化 fn.js 文件
  • 2、優(yōu)化公共資源中的 css
  • 3、優(yōu)化公共資源中的圖片

減少主包體積

為何要減少主包體積

從前文小程序的啟動(dòng)流程得知，在打開小程序的頁(yè)面時(shí)會(huì)經(jīng)過(guò)【下載小程序包】、【加載主包資源】、【執(zhí)行頁(yè)面邏輯】等過(guò)程，如果主包中內(nèi)容較多，會(huì)影響【下載小程序包】和【加載主包資源】的時(shí)長(zhǎng)，頁(yè)面展示就會(huì)變慢，fmp 也會(huì)升高。在性能優(yōu)化中，我們需要找到各種辦法降低fmp。

主包里都包含什么內(nèi)容

我們先來(lái)看看小程序的編譯邏輯：

來(lái)源	內(nèi)容	編譯后去向
主包	.swan / .js / .css / .json	主包
分包	.swan / .js / .css / .json	分包
自定義組件	.swan / .js / .css / .json	主包
公共資源中	.js	整個(gè)項(xiàng)目中，引用次數(shù)大于1的文件編譯在 主包 中，其他在分包中
	.css	編譯到引用的各個(gè)頁(yè)面中，編譯后當(dāng)前css內(nèi)容的體積會(huì)成倍增長(zhǎng)
	圖片 / .json	主包
npm包	服務(wù)組件 / 插件 / 動(dòng)態(tài)庫(kù)	主包
	utils方法	整個(gè)項(xiàng)目中，引用次數(shù)大于1的文件，編譯在 主包 中，其他在分包中
	模板	如果模板被開發(fā)者放入主包中，編譯后就在主包中；如果放入分包中，編譯后就在分包中

從上表中的編譯邏輯可以分析出：

• 自定義組件（插件、動(dòng)態(tài)庫(kù)等）編譯時(shí)都會(huì)打包到主包中，目前還不支持依賴分析，這些內(nèi)容的體積會(huì)影響主包大小
• 公共資源中的圖片在編譯時(shí)無(wú)法進(jìn)行依賴分析，所以會(huì)直接劃分到主包中

減少主包體積的方式

方式1：減少主包中包含的頁(yè)面

思考1：主包中應(yīng)該包含什么內(nèi)容呢？

首先按官網(wǎng)規(guī)定，app.json - tabBar 中設(shè)置的頁(yè)面，是必須要放在主包中的，其次重點(diǎn)頁(yè)面也需要放在主包中。從 fmp 計(jì)算方式可知，我們需要知道小程序中哪些是入口頁(yè)面。這方面的信息，從開發(fā)者平臺(tái)的數(shù)據(jù)中可以查到。在開發(fā)者平臺(tái)找到目標(biāo)小程序的【數(shù)據(jù)分析-行為分析】，我們可以按入口頁(yè)次數(shù)排序，找到訪問(wèn)量大的頁(yè)面，這些就是需要放在主包中的頁(yè)面。

需要注意的是，如果小程序入口較為分散，則需要計(jì)算出多少個(gè)頁(yè)面對(duì)小程序整體 fmp 有較大影響。

思考2：如何在不影響外部推廣的情況下，剔除主包中的部分頁(yè)面？

如果主包中已經(jīng)包括了很多不重要的頁(yè)面，且不確定是否有外部推廣，不敢隨意改動(dòng)真是路徑，我們可以選擇通過(guò)自定義路由來(lái)映射 path 與真實(shí)頁(yè)面路徑，從而在不影響外部推廣的前提下，把這部分頁(yè)面從主包中劃分出去，減少主包體積。
以某政務(wù)小程序?yàn)槔?，主包中的?yè)面從訪問(wèn)量小的開始算，從主包中使用自定義路由移除48個(gè)頁(yè)面，fmp提升了5%左右。在使用自定義路由后，項(xiàng)目上線時(shí)需要注意小程序基礎(chǔ)庫(kù)版本的升級(jí)。

注意：

• 自定義路由雖然可以讓我們很方便的分包，但過(guò)多的自定義路由配置，會(huì)增加小程序初始化時(shí)長(zhǎng)，從而增加整體 fmp 時(shí)長(zhǎng)。所以自定義路由在必須配置的前提下，越少越好。以某政務(wù)小程序?yàn)槔?，增?0個(gè)自定義路由配置后，fmp 增加了15ms。
• app.json中在設(shè)置 app.json - preloadRule 時(shí)，key值并沒(méi)有用處，所以增加路由后，key 值寫成 path 還是真實(shí)路徑都可以，小程序框架框架中只會(huì)讀取 value 值。

思考3：主包中的內(nèi)容是越少越好么？

這就要結(jié)合小程序的主包、分包下載機(jī)制來(lái)看，如果頁(yè)面在分包中的話，打開頁(yè)面時(shí)會(huì)同時(shí)需要下載主包和分包。

入口	下載內(nèi)容
入口為主包頁(yè)面	主包
入口為分包a中的頁(yè)面	主包、分包a

思考4：其他的頁(yè)面分成幾個(gè)子包合適？

這要從小程序并行下載子包數(shù)量、包體積與下載失敗率的關(guān)系、分包頁(yè)面與主包頁(yè)面緊密程度、頁(yè)面入口 pv 等幾個(gè)方面來(lái)綜合衡量。

1、【并行下載子包數(shù)量】

小程序雙端并發(fā)下載數(shù)量較少，大概率都是串行下載，所以分包數(shù)量不宜過(guò)多。

2、【包體積與下載失敗率】

雙端下載失敗率均在千分之幾以內(nèi)，按經(jīng)驗(yàn)來(lái)說(shuō)，如果待下載的內(nèi)容在 1M 以下的體積，下載失敗率可以忽略不計(jì)

3、【分包頁(yè)面與主包頁(yè)面緊密程度、頁(yè)面入口pv】

這是個(gè)需要具體小程序具體分析的問(wèn)題。以某政務(wù)小程序?yàn)槔?/p>

• 某政務(wù)小程序小程序頁(yè)面很多，首先我們分出了頁(yè)面月總pv在500的以下，這些訪問(wèn)量很小的頁(yè)面被分在 lower 分包中
• 從開發(fā)者可查詢到主包頁(yè)面的跳轉(zhuǎn)依賴的頁(yè)面數(shù)據(jù)，這些依賴頁(yè)面打在 mainDep 包中，其中刨除掉 lower 中已有的
• lower 分包中的頁(yè)面由于訪問(wèn)量很小，在 app.json - preloadRule 中設(shè)置需要下載的分包時(shí)，不設(shè)置 lower 分包
• 綜合考慮后某政務(wù)小程序分為 mainDep 和 lower 2個(gè) 分包

方式2：減少自定義組件

1、減少共用的自定義組件

根據(jù)編譯邏輯可知，小程序中使用的所有自定義組件目前還無(wú)法按需加載，這些自定義組件暫時(shí)都會(huì)編譯到主包中。由于分包頁(yè)面都不是重點(diǎn)頁(yè)面，只在分包中使用的自定義組件，可以考慮直接放在分包各頁(yè)面的模板中，減少主包體積。

2、減少非共用的自定義組件

只有一個(gè)頁(yè)面使用的自定義組件，可以直接合并到頁(yè)面模板中，減少初始化和創(chuàng)建自定義組件的損耗。

方式3：優(yōu)化公共資源

1、優(yōu)化 fn.js 文件

fn.js 文件就是我們常說(shuō)的公共資源或者 utils 中的 js 文件，根據(jù)編譯邏輯可知，這種 js 文件如果被引用大于1次，就會(huì)編譯到主包中。開發(fā)中往往我們的 fn.js 文件中，都會(huì)包含很多個(gè)方法，導(dǎo)致頁(yè)面無(wú)法精確的引用，從而不能更精確的編譯打包。建議每個(gè)方法寫在一個(gè)文件中，方便更精準(zhǔn)的編譯打包。

2、優(yōu)化公共資源中的 css

根據(jù)編譯邏輯可知，公共資源中的 css 文件，被頁(yè)面 css 文件引用后，編譯時(shí)會(huì)自動(dòng)合并到每個(gè)頁(yè)面的 css 中。也就是說(shuō)，公共資源中的css看起來(lái)是寫了一份，但編譯后會(huì)成倍復(fù)制，分別merge到引用的頁(yè)面中，所以公共資源中的 css 只提取必要內(nèi)容的即可。盡量減少引用公共資源中的 css 后，又在頁(yè)面 css 中覆蓋一遍的情況。

3、優(yōu)化公共資源中的圖片

根據(jù)編譯邏輯可知，所有在非分包頁(yè)面文件夾中的圖片，都會(huì)被打到主包中。所以需要逐個(gè)對(duì)我們的圖片做篩選，如果圖片較大，可以選擇放在 CDN 上，盡量減少主包體積。同時(shí)，壓縮圖片也是必不可少的。

網(wǎng)頁(yè)標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：減少主包體積
地址分享：http://fisionsoft.com.cn/article/cdchhig.html