小程序包大小超過2M的解決方法
微信限制了小程序的代碼包不能超過2MB,這主要是出于對小程序啟動速度的考慮。但是,2MB 的大小也限制了小程序功能的擴展,如果大小超出了2MB該如何解決呢?
1. 優(yōu)化代碼,刪除掉不用的代碼
2. 圖片壓縮或者上傳服務(wù)器
一般圖片所占用的空間比較大,盡量不要放在小程序本地文件夾中,如果圖片不多的話可以對圖片進行壓縮,圖片壓縮平臺:https://tinyjpg.com/
另外, 通過cli命令創(chuàng)建的uni app項目,可將圖片或字體圖標(biāo)放入assets文件夾下,通過require引入, 也可減少主包大。
3. 分包加載:
什么是分包加載:
小程序一般都是由某幾個功能組成,通常這幾個功能之間是獨立的,但會依賴一些公共的邏輯,且這些功能一般會對應(yīng)某幾個獨立的頁面。那么小程序代碼的打包,可以按照功能的劃分,拆分成幾個分包,當(dāng)需要用到某個功能時,才加載這個功能對應(yīng)的分包。
對于用戶來說,小程序加載流程變成了:
1.首次啟動時,先下載小程序主包,顯示主包內(nèi)的頁面;
2.當(dāng)進入某個分包的頁面,再下載這個對應(yīng)分包,下載完畢后,顯示分包的頁面。
采用分包加載,對開發(fā)者而言,能使小程序有更大的代碼體積,承載更多的功能與服務(wù);而對用戶而言,可以更快地打開小程序,同時在不影響啟動速度前提下使用更多功能。
分包的劃分:
在配置前,按照功能對各個分包的內(nèi)容進行劃分,將同一個功能下的頁面和邏輯放在童改一個目錄下,把一些跨功能的公共邏輯放在主包下。
在分包劃分時需注意:
1.包與包之間功能盡可能獨立,避免分包與分包之間引用上的耦合。因為分包的加載是由用戶操作觸發(fā)的,并不能確保某分包加載時,另外一個分包就一定存在,這個時候可能會導(dǎo)致 JS 邏輯異常的情況,例如報「”xxx.js” is not defined」這樣的錯誤;
2.一些公共的自定義組件,要放在主包內(nèi)。
分包的配置:
在uni app中通過cli初始化的小程序目錄結(jié)構(gòu)如下:
├── src
├── main.js
├── App.vue
├── pages.json
├── manifest.json
├── orderPackages
│ └── pages
│ ├── goodsDetail
│ └── myorder
├── pages
│ ├── index
│ └── user
└── utils
需在pages.json中配置subPackages字段,在subPackage里面聲明項目的分包結(jié)構(gòu):
目前小程序分包大小的限制:
整個小程序所有分包大小不超過 4M
單個分包/主包大小不能超過 2M
以上只羅列了uni app框架分包加載的步驟, 原生小程序分包方法根據(jù)官方文檔即可快速實現(xiàn),小程序框架雖多, 大都大同小異,如果后續(xù)有使用其他框架進行開發(fā),會進行補充。