做小程序開發(fā)的朋友，大概率都遇到過這樣的煩惱：隨著功能越做越多，小程序的包體積也跟著“膨脹”，輕則導(dǎo)致首次加載變慢，用戶沒耐心等就直接退出；重則超出平臺(tái)限制，連發(fā)布都發(fā)布不了。我這邊經(jīng)過一次完整的工程化優(yōu)化，把小程序包體積壓縮了70%，從原本的“臃腫卡頓”變成了“輕盈流暢”，今天就用大白話，把整個(gè)實(shí)踐過程講清楚，不管是新手還是有經(jīng)驗(yàn)的開發(fā)者，都能看懂、能用得上，全程不聊復(fù)雜概念，只說(shuō)實(shí)際能落地的操作。
首先得搞明白一個(gè)問題：小程序的包體積，到底是被什么“撐大”的？很多人只知道體積大，但不知道問題出在哪，盲目?jī)?yōu)化只會(huì)白費(fèi)功夫。其實(shí)說(shuō)白了，包體積變大，主要就四個(gè)原因：一是圖片、字體這些靜態(tài)資源沒處理，隨便丟進(jìn)去就打包；二是代碼冗余，沒用的代碼、重復(fù)的代碼堆了一堆，還有調(diào)試用的代碼沒刪掉；三是第三方依賴亂引用，不管用不用得到，一股腦全引入，很多冗余功能也跟著打包；四是打包配置沒優(yōu)化，默認(rèn)配置會(huì)把很多用不上的東西都打包進(jìn)去，相當(dāng)于“買一送十”，沒用的東西占了大部分空間。
我們的優(yōu)化核心，就是針對(duì)這四個(gè)“膨脹點(diǎn)”，一步步“瘦身”，而且不是零散的優(yōu)化，是工程化的、可復(fù)用的操作，意思就是這次優(yōu)化完，后續(xù)新增功能、迭代版本，體積也能一直控制住，不用每次都重新花大量時(shí)間優(yōu)化。整個(gè)過程分為四個(gè)階段：靜態(tài)資源“瘦身”、代碼冗余清理、第三方依賴優(yōu)化、打包配置升級(jí)，每個(gè)階段都有具體的操作方法，全程大白話講解，不搞專業(yè)術(shù)語(yǔ)忽悠人。
第一個(gè)階段，也是最容易出效果的階段——靜態(tài)資源“瘦身”，這部分大概能貢獻(xiàn)40%的壓縮效果，相當(dāng)于“一出手就瘦一半”。很多人做小程序，圖片都是直接從設(shè)計(jì)那邊拿過來(lái)就用，設(shè)計(jì)給的圖片動(dòng)輒幾兆，一張圖片就占了包體積的一大半，這其實(shí)是最沒必要的浪費(fèi)。我們優(yōu)化的時(shí)候，主要做了三件事，全部都是能直接落地的。
第一件事，圖片壓縮+格式轉(zhuǎn)換。不管是首頁(yè)的Banner圖、圖標(biāo)，還是頁(yè)面里的配圖，全部都要經(jīng)過壓縮處理。不用自己找復(fù)雜的工具，網(wǎng)上有很多免費(fèi)的在線壓縮工具，拖進(jìn)去就能壓縮，壓縮后的圖片清晰度基本沒變化，但體積能縮小50%-70%。另外，把所有的PNG、JPG圖片，盡量轉(zhuǎn)換成更小巧的格式，這種格式的圖片體積比PNG小很多，而且清晰度也能滿足小程序的需求，尤其是圖標(biāo)類的圖片，轉(zhuǎn)換后體積能縮減80%以上。這里要注意一點(diǎn)，不要把所有圖片都轉(zhuǎn)換成一種格式，根據(jù)圖片的用途來(lái)選，比如色彩豐富的Banner圖，用一種格式；簡(jiǎn)單的圖標(biāo)，用另一種更小巧的格式，兼顧清晰度和體積。
第二件事，清理無(wú)用圖片。很多時(shí)候，小程序迭代了好幾個(gè)版本，之前版本用到的圖片、廢棄功能的圖片，還一直留在項(xiàng)目文件夾里，打包的時(shí)候會(huì)一起打包進(jìn)去，相當(dāng)于“占著茅坑不拉屎”。我們專門做了一次無(wú)用圖片排查，用項(xiàng)目里的搜索工具，逐個(gè)排查每張圖片的引用情況，只要是沒有被任何頁(yè)面、任何組件引用的圖片，全部刪除，不留一絲冗余。這里可以教大家一個(gè)小技巧，把項(xiàng)目里的所有圖片路徑整理出來(lái)，然后用代碼搜索工具，逐個(gè)搜索路徑，沒有搜索結(jié)果的，就是無(wú)用圖片，直接刪除就行，不用怕刪錯(cuò)，刪之前可以先備份一下，確認(rèn)無(wú)誤后再?gòu)氐讋h除。
第三件事，靜態(tài)資源外置。對(duì)于一些不常用的圖片、字體文件，還有體積較大的音頻、視頻文件，我們沒有再打包進(jìn)小程序包里，而是放到了外部的存儲(chǔ)服務(wù)上，小程序運(yùn)行的時(shí)候，再按需加載。比如一些活動(dòng)頁(yè)面的圖片，不是每個(gè)用戶都會(huì)看到，就沒必要打包進(jìn)主包，用戶進(jìn)入活動(dòng)頁(yè)面的時(shí)候，再?gòu)耐獠考虞d，這樣既能減少主包體積，也不影響用戶體驗(yàn)。還有字體文件，很多人會(huì)引入完整的字體包，體積動(dòng)輒幾兆，其實(shí)我們只用到了字體里的一部分文字，比如數(shù)字、常用漢字，這時(shí)候可以用工具提取出常用的文字，生成一個(gè)精簡(jiǎn)版的字體包，體積能從幾兆縮減到幾十KB，或者直接把字體文件外置，按需加載，進(jìn)一步減少包體積。
靜態(tài)資源優(yōu)化完，包體積已經(jīng)能縮減不少了，接下來(lái)是第二個(gè)階段——代碼冗余清理，這部分能貢獻(xiàn)20%左右的壓縮效果，相當(dāng)于“再瘦一圈”。代碼冗余就像是衣服上的多余線頭，看起來(lái)不起眼，但堆多了也會(huì)占空間，而且還會(huì)影響小程序的運(yùn)行速度。我們主要從三個(gè)方面清理，全程都是工程化操作，后續(xù)迭代也能沿用。
首先，清理無(wú)用代碼和注釋。很多開發(fā)者寫代碼的時(shí)候，會(huì)留下很多調(diào)試用的代碼，比如打印日志的代碼，還有注釋，這些代碼和注釋在開發(fā)的時(shí)候有用，但打包發(fā)布的時(shí)候，一點(diǎn)用都沒有，還會(huì)增加包體積。我們優(yōu)化的時(shí)候，啟用了打包工具的自動(dòng)清理功能，打包的時(shí)候，自動(dòng)刪除所有的調(diào)試代碼、無(wú)用注釋，不用手動(dòng)一個(gè)個(gè)刪除，既節(jié)省時(shí)間，又不會(huì)遺漏。另外，手動(dòng)排查無(wú)用的函數(shù)、變量，比如有些函數(shù)寫了之后，后續(xù)需求變更，再也沒用到過，還有一些變量定義了，但一直沒使用，這些都要手動(dòng)刪除，尤其是一些老代碼，里面的冗余會(huì)更多，排查的時(shí)候要耐心一點(diǎn)，逐行查看，確保沒有遺漏。
其次，去重合并重復(fù)代碼。很多頁(yè)面、組件里，會(huì)有大量重復(fù)的代碼，比如兩個(gè)頁(yè)面都有相同的表單驗(yàn)證邏輯、相同的彈窗邏輯，都是各自寫了一遍，沒有復(fù)用，這樣就導(dǎo)致代碼重復(fù)，包體積翻倍。我們優(yōu)化的時(shí)候，把所有重復(fù)的代碼，都提取出來(lái)，做成公共的函數(shù)、公共的組件，比如把表單驗(yàn)證邏輯做成一個(gè)公共函數(shù)，所有頁(yè)面都可以調(diào)用；把彈窗做成一個(gè)公共組件，哪里需要用到，就直接引入，不用重復(fù)寫代碼。這樣一來(lái)，重復(fù)的代碼被合并，包體積自然就減少了，而且后續(xù)修改的時(shí)候，只需要修改公共部分，所有頁(yè)面都會(huì)同步更新，還能提高開發(fā)效率，一舉兩得。
最后，簡(jiǎn)化代碼邏輯。很多開發(fā)者寫代碼的時(shí)候，喜歡寫復(fù)雜的邏輯，明明幾行代碼就能實(shí)現(xiàn)的功能，非要寫幾十行，不僅增加了包體積，還會(huì)影響小程序的運(yùn)行速度。我們優(yōu)化的時(shí)候，逐個(gè)梳理頁(yè)面和組件的代碼邏輯，把復(fù)雜的邏輯簡(jiǎn)化，比如一些循環(huán)判斷，可以用更簡(jiǎn)潔的寫法替代；一些不必要的嵌套，盡量減少嵌套層數(shù)；還有一些冗余的判斷條件，刪除無(wú)用的條件，只保留必要的邏輯。比如，原本一個(gè)表單驗(yàn)證，寫了幾十行代碼，梳理之后，發(fā)現(xiàn)很多判斷都是重復(fù)的，簡(jiǎn)化之后，只需要十幾行代碼就能實(shí)現(xiàn)同樣的功能，代碼量減少了，包體積也跟著減少了。
第三個(gè)階段，第三方依賴優(yōu)化，這部分能貢獻(xiàn)10%左右的壓縮效果，相當(dāng)于“查漏補(bǔ)缺，再瘦一點(diǎn)”。很多小程序的包體積膨脹，都是因?yàn)榈谌揭蕾囈氩划?dāng)導(dǎo)致的，很多開發(fā)者為了圖方便，不管用不用得到，一股腦把第三方依賴全引入，比如一個(gè)處理時(shí)間的依賴，只需要用到其中一個(gè)格式化時(shí)間的功能，但卻引入了整個(gè)依賴包，整個(gè)依賴包的體積動(dòng)輒幾百KB，甚至幾兆，完全是浪費(fèi)。
我們優(yōu)化的時(shí)候，主要做了三件事。第一件事，清理無(wú)用的第三方依賴。逐個(gè)排查項(xiàng)目里引入的所有第三方依賴，確認(rèn)每個(gè)依賴的用途，只要是沒有用到的，或者后續(xù)需求變更，再也用不到的依賴，全部卸載，不留一絲冗余。比如，之前引入了一個(gè)圖表依賴，用來(lái)展示數(shù)據(jù)，但后續(xù)需求變更，不再需要圖表展示，這個(gè)依賴就一直留在項(xiàng)目里，打包的時(shí)候會(huì)一起打包進(jìn)去，卸載之后，就能減少幾百KB的體積。
第二件事，按需引入第三方依賴。對(duì)于必須用到的第三方依賴，不引入整個(gè)包，只引入需要用到的部分。比如，一個(gè)常用的工具類依賴，里面有很多功能，但我們只用到了其中的一個(gè)功能，這時(shí)候就不要引入整個(gè)依賴包，只引入這個(gè)功能對(duì)應(yīng)的模塊，這樣就能大幅減少依賴包的體積。很多第三方依賴都支持按需引入，具體的引入方法，可以看對(duì)應(yīng)的官方文檔，操作起來(lái)都很簡(jiǎn)單，不用復(fù)雜的配置，新手也能輕松上手。
第三件事，替換體積大的第三方依賴。有些第三方依賴，功能雖然好用，但體積很大，其實(shí)有很多體積更小的替代方案，功能基本一致，完全可以替換。比如，一個(gè)處理時(shí)間的依賴，體積有幾百KB，而另一個(gè)類似的依賴，體積只有幾十KB，功能完全能滿足我們的需求，這時(shí)候就可以把體積大的依賴替換成體積小的，既能減少包體積，又不影響功能使用。替換的時(shí)候，要注意測(cè)試，確保替換后的依賴能正常工作，沒有兼容性問題，避免出現(xiàn)bug。
第四個(gè)階段，打包配置升級(jí)，這部分是“錦上添花”，能再貢獻(xiàn)10%左右的壓縮效果，讓包體積壓縮達(dá)到70%的目標(biāo)。很多開發(fā)者打包小程序的時(shí)候，都是用默認(rèn)的打包配置，從來(lái)沒有優(yōu)化過，默認(rèn)配置會(huì)把很多用不上的東西都打包進(jìn)去，比如一些開發(fā)環(huán)境的配置、無(wú)用的文件，還有一些沒有用到的平臺(tái)資源，這些都能通過優(yōu)化打包配置來(lái)刪除。
我們優(yōu)化的時(shí)候，主要做了三件事。第一件事，優(yōu)化打包忽略配置。在打包配置文件里，把所有不需要打包的文件和文件夾，都添加到忽略列表里，比如開發(fā)環(huán)境的配置文件、測(cè)試用的文件、備份文件，還有一些無(wú)用的文件夾，這些文件不會(huì)影響小程序的正常運(yùn)行，打包的時(shí)候忽略它們，就能減少包體積。比如，項(xiàng)目里的測(cè)試文件夾，里面都是測(cè)試用的代碼和文件，打包的時(shí)候不需要打包進(jìn)去，添加到忽略列表里，就能節(jié)省一部分體積。
第二件事，啟用打包壓縮功能。很多打包工具都自帶壓縮功能，默認(rèn)情況下可能沒有啟用，啟用之后，打包的時(shí)候會(huì)自動(dòng)壓縮代碼、樣式文件，進(jìn)一步減少包體積。比如，代碼文件會(huì)被壓縮，刪除多余的空格、換行，還有一些冗余的語(yǔ)法，體積能縮減20%-30%；樣式文件也會(huì)被壓縮，刪除無(wú)用的樣式、重復(fù)的樣式，體積也能大幅減少。啟用壓縮功能很簡(jiǎn)單，只需要在打包配置文件里，添加一行配置，就能自動(dòng)生效，不用復(fù)雜的操作。
第三件事，分包加載配置。對(duì)于一些功能模塊較多的小程序，我們可以把小程序分成主包和多個(gè)分包，主包只包含首頁(yè)、核心組件和公共資源，其他的功能模塊，比如我的頁(yè)面、設(shè)置頁(yè)面、活動(dòng)頁(yè)面，都放到分包里，用戶打開小程序的時(shí)候，只加載主包，進(jìn)入對(duì)應(yīng)的功能模塊，再加載對(duì)應(yīng)的分包，這樣既能減少主包的體積，又能提高小程序的首次加載速度。分包加載的配置也很簡(jiǎn)單，在打包配置文件里，設(shè)置好主包和分包的路徑，就能自動(dòng)打包成分包形式，不用修改太多代碼，新手也能輕松配置。
到這里，四個(gè)階段的優(yōu)化就全部完成了，整個(gè)過程都是工程化的操作，不是零散的優(yōu)化，后續(xù)新增功能、迭代版本的時(shí)候，只要沿用這些方法，就能一直控制住包體積，不用每次都重新花大量時(shí)間優(yōu)化。比如，新增圖片的時(shí)候，自動(dòng)壓縮+格式轉(zhuǎn)換；新增代碼的時(shí)候，避免重復(fù)代碼，啟用按需引入；新增第三方依賴的時(shí)候，確認(rèn)用途，按需引入，這樣就能確保小程序的包體積一直保持在較小的狀態(tài)。
最后，跟大家說(shuō)一下優(yōu)化后的效果：原本體積龐大的小程序，經(jīng)過這四個(gè)階段的優(yōu)化，包體積直接壓縮了70%，首次加載速度提升了60%以上，用戶打開小程序的時(shí)候，基本不會(huì)出現(xiàn)卡頓、加載慢的情況，而且也順利避開了平臺(tái)的體積限制，發(fā)布再也不會(huì)因?yàn)轶w積過大而失敗。另外，優(yōu)化之后，小程序的運(yùn)行速度也變快了，頁(yè)面切換、點(diǎn)擊操作都變得更加流暢，用戶體驗(yàn)也提升了很多。
總結(jié)一下，小程序包體積壓縮，其實(shí)沒有那么復(fù)雜，核心就是找到“膨脹點(diǎn)”，針對(duì)性地“瘦身”，重點(diǎn)抓好靜態(tài)資源優(yōu)化和代碼冗余清理，這兩部分能貢獻(xiàn)大部分的壓縮效果，再加上第三方依賴優(yōu)化和打包配置升級(jí)，就能輕松實(shí)現(xiàn)70%的壓縮目標(biāo)。而且，這些方法都是通俗易懂、能直接落地的，不管是新手還是有經(jīng)驗(yàn)的開發(fā)者，都能學(xué)會(huì)、用上。后續(xù)我也會(huì)持續(xù)優(yōu)化，根據(jù)小程序的迭代情況，調(diào)整優(yōu)化方案，確保包體積一直保持在最優(yōu)狀態(tài)，也希望這些實(shí)踐經(jīng)驗(yàn)，能幫助到更多做小程序開發(fā)的朋友，避免走彎路，輕松搞定小程序包體積過大的問題。
聯(lián)系電話題-1.jpg)