微信小程序自推出以來，逐漸發(fā)展，目前正受到越來越多的青睞。其中很重要的一點(diǎn)得益于小程序的輕量級特性，每個(gè)小程序最多不超過2MB，招之即來揮之即去，相比于幾十上百兆的APP，用戶進(jìn)入小程序，或者說，小程序獲取新用戶，的成本大大降低。

但與之相應(yīng)的，是開發(fā)資源的限制。由于輕量級特性，小程序的代碼包體積、可用內(nèi)存空間、可用存儲空間等均受限制。如何在有效支持業(yè)務(wù)邏輯的同時(shí)，盡量減少資源占用，在小程序開發(fā)環(huán)境中顯得尤為重要。代碼包體積是其中的一個(gè)重要方面，本文將就此進(jìn)行分析與探討。

背景

本文內(nèi)容基于小程序“轉(zhuǎn)轉(zhuǎn)官方”經(jīng)驗(yàn)總結(jié)，部分內(nèi)容與開發(fā)環(huán)境密切相關(guān)，因而此處進(jìn)行簡要介紹。

“轉(zhuǎn)轉(zhuǎn)官方”是一個(gè)重量型小程序，移植了轉(zhuǎn)轉(zhuǎn)APP的絕大部分功能，從商品發(fā)布、瀏覽、搜索、下單、跟進(jìn)等交易邏輯，到留言、私信、紅包、推薦、運(yùn)營活動、個(gè)人中心、圈子社區(qū)等擴(kuò)展能力均已支持，目前代碼包體積約為1.5MB。

“轉(zhuǎn)轉(zhuǎn)官方”采用wepy框架進(jìn)行開發(fā)。該框架類似vue，支持組件化開發(fā)、ES678語法、less語法等，源碼經(jīng)編譯、壓縮后才生成實(shí)際代碼。目前線上使用版本為1.5.8?？蚣芙榻B： 像VUE一樣寫微信小程序-深入研究wepy框架

https://mp.weixin.qq.com/s/R2IlOzlA9Mb_XevDXAITdw

意義

控制代碼包大小主要意義：

避開大小限制 
小程序代碼包體積存在大小限制，一開始為1MB，后來改為2MB，代碼包體積超過此上限時(shí)將無法進(jìn)行預(yù)覽/上傳/發(fā)布。

降低用戶獲取成本 
減小代碼包體積，可以降低小程序下載時(shí)長&首次加載時(shí)長，降低新用戶流失率；同時(shí)減少下載流量和本地空間占用，提升用戶體驗(yàn)。

開發(fā)維護(hù) 
保持代碼包干凈整潔，一定程度上有利于代碼的長期維護(hù)。

策略

控制代碼包大小主要策略：

• 搬 
  能搬的盡量搬。圖片、音頻、數(shù)據(jù)、甚至頁面，很多都可以搬至服務(wù)端，需要時(shí)再通過網(wǎng)絡(luò)載入。將非核心非必要的內(nèi)容移出代碼包可以大幅度釋放代碼包空間。

• 刪 
  搬不了的盡量刪。已下線、已廢棄、無關(guān)、冗余等不需要/不再需要的內(nèi)容應(yīng)及時(shí)清理，避免持續(xù)占用代碼包空間。

• 壓縮 
  刪不了的盡量壓縮。圖片、js、wxss、wxml等均存在壓縮空間。很多時(shí)候，適當(dāng)程度的壓縮，能在幾乎不影響功能體驗(yàn)的同時(shí)，有效減少空間占用。

• 合并 
  壓縮不了的盡量合并。功能類似的資源可以歸一化，在需求/設(shè)計(jì)/實(shí)現(xiàn)層面減少資源的重復(fù)消耗。

• 其它 
  其它壓縮策略。

方案

資源外置

非核心不緊急的資源文件，特別是圖片、音頻、視頻等體積較大的媒體文件，可以移至cdn服務(wù)器，需要時(shí)再通過網(wǎng)絡(luò)載入。

這常常是小程序前期膨脹的主要原因和最有效壓縮方式，比如我們的“手機(jī)30秒快賣”小程序，將圖片資源移出代碼包后，體積從約2MB直接降到了195KB。

數(shù)據(jù)外置

非核心不緊急的數(shù)據(jù)內(nèi)容，包括城市地區(qū)等大段數(shù)據(jù)，標(biāo)簽映射等大段配置，使用條約、服務(wù)說明等大段文案，可以移至數(shù)據(jù)服務(wù)器或本地storage，需要時(shí)再予以載入。

有些內(nèi)容體積會比想象中大，比如我們的“轉(zhuǎn)轉(zhuǎn)使用條約”，移出代碼包后，釋放了約40KB空間。

功能外置

非核心自定義屬性不強(qiáng)烈、不緊急可以異步處理的功能，可以移至外部實(shí)現(xiàn)。如選擇地址、查看大圖等功能可以交由小程序原生接口實(shí)現(xiàn)，編碼解碼等功能可以交由服務(wù)端實(shí)現(xiàn)。

頁面外置

非核心不緊急的頁面，可以考慮移至服務(wù)端。從基礎(chǔ)庫1.6.4起，小程序開始支持內(nèi)嵌網(wǎng)頁，非核心頁面可以考慮適當(dāng)往web服務(wù)器遷移。

[wepy] 清理殘留文件

目前wepy編譯時(shí)不會自動清理上次編譯殘留的文件，導(dǎo)致歷史資源持續(xù)積累。

e.g. 7個(gè)頁面,npm run build, 172KB -> 刪掉6個(gè)頁面, npm run build, 依然 172KB。

因而應(yīng)當(dāng)修改build腳本，在編譯前增加清空dist步驟，或在編譯前手動刪除dist目錄。

清理無關(guān)文件

應(yīng)避免代碼包中混入運(yùn)行無關(guān)的文件，如readme、doc、demo、測試用例等。

可以通過設(shè)計(jì)合理的文件結(jié)構(gòu)避免無關(guān)文件混入代碼目錄，wepy框架下也可以配置.wepyignore自動按類型/目錄過濾文件（項(xiàng)目目錄-新建.wepyignore文件-編輯-語法參考.gitignore）。

清理已下線/已棄用文件

已下線/已棄用的文件資源應(yīng)及時(shí)清理，包括npm包、組件、頁面、媒體資源等。若后續(xù)需要重新上線/重新使用，可以通過git等版本控制工具找回。這部分資源不需要持續(xù)占用代碼包空間。

IDE的查看引用、范圍搜索等功能可以為清理過程提供一定的便利。

資源都移至cdn之后，這部分空間可能就是最可觀的了?！稗D(zhuǎn)轉(zhuǎn)官方”小程序代碼包體積從2MB出頭降到了約1.5MB，主要就是由清理殘留文件、清理已下線/已棄用文件釋放的。

[wepy]清理多余wxml文件

目前wepy編譯時(shí)會將組件的dom部分拼合到頁面中，而不生成單獨(dú)的wxml文件。

但若組件所在文件路徑不含'/components/'，則編譯環(huán)節(jié)wepy不會識別其為組件，會按'Other'類型處理，從而生成多余的wxml文件和json文件。

確保組件都放在components目錄下可以避免這部分多余空間消耗。

清理大文件

大文件常常存在較大的壓縮空間，值得重點(diǎn)排查和處理。

查找大文件tip：資源管理器 - 代碼目錄 - 搜索'*' - 右鍵 - 排序方式：大小，即可將代碼包內(nèi)所有文件按大小排序展示

資源壓縮

大部分資源都可以進(jìn)行適當(dāng)壓縮，常?？梢栽诒ＷC功能體驗(yàn)的同時(shí)，有效地減少空間占用。參考工具：

• js壓縮: 配置wepy-plugin-uglifyjs插件

• json、wxml壓縮： 配置wepy-plugin-filemin插件

• less壓縮： 配置wepy-compiler-less插件

• 圖片壓縮： 配置wepy-plugin-imagemin插件、TinyPNG

  其中TinyPNG工具壓縮效果非?？捎^，400KB的圖片壓到40KB不足為奇，并且畫質(zhì)感知上幾乎無損。

資源合并

功能類似的資源可以歸一化，減少重復(fù)空間占用。

• 需求層面，比如不同運(yùn)營活動可以采用統(tǒng)一模板，而不每次增加單獨(dú)頁面等；

• 樣式層面，比如可以統(tǒng)一彈窗規(guī)范，而不引入五花八門的零碎彈窗組件等；

• 設(shè)計(jì)開發(fā)層面，比如可以盡量解耦合抽取公共組件，減少重復(fù)造輪子等。

[wepy]清理組件DOM冗余拷貝？

觀察發(fā)現(xiàn)，目前wepy的組件實(shí)現(xiàn)中，編譯后頁面對組件js、wxss的引用是通過require、@import的形式實(shí)現(xiàn)的，而對組件dom的引用則是直接拼合到頁面wxml文件中。

這導(dǎo)致，當(dāng)一個(gè)組件被多處引用時(shí)，其dom內(nèi)容會有多份冗余拷貝。

e.g. 10個(gè)頁面引用了組件A => 編譯出的10個(gè)頁面wxml各含一份A的dom，A的template部分在代碼包中被原模原樣重復(fù)了10次

如果修改wepy編譯過程，將組件dom引用過程改為使用include或原生組件（基礎(chǔ)庫1.6.3開始支持）實(shí)現(xiàn)，應(yīng)當(dāng)可以節(jié)省這部分冗余開銷。

[wepy]壓縮自動生成的代碼量？

觀察發(fā)現(xiàn)，代碼包中除了手動維護(hù)的業(yè)務(wù)代碼之外，也有不少框架/插件自動生成的代碼。如源碼編譯過程中生成的輔助代碼、兼容ES678語法引入的墊片代碼、兼容各運(yùn)行環(huán)境引入的css前綴代碼等。

通過對框架和插件進(jìn)行修改/配置，應(yīng)當(dāng)可以一定程度減少這部分空間開銷。比如對babel插件進(jìn)行規(guī)則配置、對auto-prefix插件進(jìn)行最低版本配置，應(yīng)當(dāng)可以犧牲部分不必要的兼容性，從而減少墊片代碼的生成量等。諸如此類。

只是筆者未及嘗試，尚不確定這部分開銷是否有可觀的壓縮空間。

壓縮額外文件空間？

觀察發(fā)現(xiàn)，代碼包大小總是比代碼內(nèi)容總大小大得多（上傳后詳情面板中“上次上傳”、“上次預(yù)覽”總是比“本地代碼”大得多）。

這部分額外大小應(yīng)當(dāng)也是存在壓縮空間的。比如將細(xì)碎圖片、細(xì)碎js文件、細(xì)碎less文件拼合成雪碧圖、js庫、less庫等較大文件，應(yīng)當(dāng)可以減少由于文件最小存儲單元引入的額外空間開銷等。諸如此類。

只是筆者未及嘗試，尚不確定這部分開銷是否有可觀的壓縮空間。

總結(jié)

由于輕量級特性，小程序開發(fā)環(huán)境中，對代碼包體積的控制是十分必要且十分有意義的。

本文介紹了代碼包體積壓縮的一些策略、方案和幾個(gè)未及實(shí)踐的思路?？偟膩碚f，就是盡量精簡，盡量只將最核心最必要最緊急的內(nèi)容放在代碼包內(nèi)。其它資源過多占用代碼包空間時(shí)，則考慮通過搬移/刪除/壓縮/合并等方式予以釋放。

拙劣之處歡迎不吝賜教。