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