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