小程式大小超限除了分包還能怎麼做?有什麼辦法能避免大小超過限制的情況?以下這篇文章為大家介紹避免和解決大小限制的方法,希望對大家有幫助!
前幾天一個剛入行的朋友為微信問我提交小程式碼提示太大了不能上傳是什麼原因?怎麼解決?
當然分包能解決微信小程式幾乎所有的提交大小限制問題,但我還是請他把提示內容寄給我。我一看也就超出了四五百kb,用分包那不是大材小用就讓他把靜態資源壓縮一下就搞定了,但是後面我想想分包除了能解決大小這個問題還有什麼好處吶?還有什麼辦法能避免大小超過限制的情況?
1️⃣先看一下目前微信小程式對大小上的相關限制:
1.不限制相關限制的數量;
2.所有分包的大小不能超過20m;#o# ;
因為小程式的設計初衷就是用完即走,輕量化應用。不建議將它當成一個app來設計,所以考慮到啟動速度等方面所以才對大小做了限制。
echarts,通常我們用到的可能也有幾種圖標,所以在安裝的時候沒必要將echarts全部下載,直接在echarts官網在線定制可以節省不只一星半點的大小(echarts中國地圖有問題不推薦使用哦)像我們使用的一些ui庫類似,能按需引入就按需引入不能按需引入我們就換一個
在這裡推薦一些微信小程式常用的UI庫合集
1、官方WeUI元件庫https://developers.weixin.qq. com/miniprogram/dev/extended/weui/#2、ColorUI
https://github.com/weilanwl/ ColorUI3、Vant Weapp UI
#https://youzan.github.io/vant-weapp/#/intro4、iView UI
#https://weapp.iviewui.com/docs/guide/start5、TaroUI
https://taro-ui.jd.com/#/docs/introduction
擦,怎麼調整圖片大小這個
二倍圖、三倍圖,讓我們根據不同的解析度去展示不同的倍圖。其實粗暴的方法我們不管什麼解析度都可以都使用三倍圖(不推薦使用哦),然後把圖片無損壓縮一下,一般能減小圖片百分之七十的大小。 在這裡推薦一個圖片壓縮的位址(https://tinypng.com/)
註冊一個七牛雲帳號->找到所有產品中的物件儲存->上傳圖片->複製連結
⚠️注意:有時候存取不了是需要設定防盜鏈,具體怎麼設定大佬們自行百度。
來到我們正統的解決大小限制的方法,先看一下文章剛開頭提出的問題:分包除了能解決大小這個問題還有什麼好處吶? 要回答這個問題先了解一下分包到底是怎麼樣工作的:在小程式啟動時,預設會下載主包並啟動主包內頁面,當使用者進入分包內某個頁面時,客戶端會把對應分包下載下來,下載完成後再進行展示。
那麼上面的問題就好回答了: 對小程式進行分包,可以優化小程式首次啟動的下載時間,以及在多團隊共同開發時可以更好的解耦協作。
那我們要分包該怎麼做? :以下列舉了我們常用的原生、uniapp、taro的分包寫法,三種開發方式做分包除了設定檔名稱是不同的,程式碼都是一樣,關鍵的是專案目錄和subpackages欄位。
原生:
// 在app.json的subpackages字段声明项目分包结构 { "pages":[ 主包 "pages/index", "pages/logs" ], "subpackages": [ 分包 { "root": "packageA", "pages": [ "pages/cat", 相对于root分包的路径 "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] }, { root:分包根目录 name:分包别名,分包预下载时可以使用 pages:分包页面路径数组,相对与分包根目录 independent:true|false分包是否是独立分包 } ] }
uniapp:
// 在pages.json的subpackages字段声明项目分包结构 代码同原生,关键就是subpackages字段
taro:
// 在src目录下app.jsx中进行配置 代码同原生,关键就是subpackages字段
# 微信小程式分包其實是一個很簡單的操作,不過還有一個分包異步化,預先下載、獨立分包等知識還是需要各位大佬再用到的時候自己多研究。
最後說一下,前段時間參加了這個年度人氣排行,其實我也知道這個榜單並不能代表什麼,但是最後結果出來排54還是讓我虛榮了一下。我覺得這個標誌對自己的意義就是督促我在新的一年輸出更高品質的文章,讓自己真的配得上這個稱號,各位大佬我們一塊加油。
最後祝福各位大佬學習進步,事業有成!
【相關學習推薦:小程式開發教學】
以上是小程式大小超限除了分包還能怎麼做?如何避免和解決大小限制?的詳細內容。更多資訊請關注PHP中文網其他相關文章!