知識(shí)
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價(jià)值,我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí),更側(cè)重于功能的便捷,營(yíng)銷的便利,運(yùn)營(yíng)的高效,讓網(wǎng)站成為營(yíng)銷工具,讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持!
您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >
通過 WeCOS 進(jìn)行小程序瘦身
發(fā)表時(shí)間:2021-3-31
發(fā)布人:葵宇科技
瀏覽次數(shù):67
盡管 4 月份微信官方將小程序的大小限制從 1M 放開到 2M,但是對(duì)于使用大量圖片的小程序(電商等)來說,2M 的限制還是顯得拮據(jù)。基于這種場(chǎng)景,騰訊云微信小程序解決方案團(tuán)隊(duì)開發(fā)了 WeCOS 小程序瘦身工具,依托騰訊云強(qiáng)大的云對(duì)象儲(chǔ)存(COS),提供自動(dòng)將小程序內(nèi)部的圖片自動(dòng)上傳到 COS,并將圖片的相對(duì)路徑改為線上 URL,這樣就可以大大的縮減小程序的大小,并且無需過多繁瑣的上傳步驟。
現(xiàn)在我們就一起來看看如何使用吧!假設(shè)我們有一個(gè)開發(fā)好的小程序開發(fā)目錄 App,目錄大小為10M。目錄下有大量圖片且代碼中有對(duì)圖片資源的引用。為了能夠上傳并正常運(yùn)行項(xiàng)目代碼,下面來示范如何使用騰訊云 WeCOS 來解決項(xiàng)目包過大的問題。項(xiàng)目目錄如圖。
接下來只需要 3 步,就可以完成小程序瘦身。
一、前期準(zhǔn)備
1. 注冊(cè)騰訊云賬號(hào),開通COS 并創(chuàng)建 Bucket。
2. 在本機(jī)上安裝 Node.js 。
二、安裝 WeCOS 并創(chuàng)建配置
打開命令行(開始-運(yùn)行-CMD-回車),使用 NPM 安裝 WeCOS。如圖所示:
npm install wecos -g

在與開發(fā)目錄 app
同目錄下創(chuàng)建一個(gè) wecos.config.json
配置文件,在配置里填寫基本的配置信息。
wecos.config.json
里填寫了最基本的配置項(xiàng)。 其中,
appDir
指定了小程序開發(fā)目錄。appid
為騰訊云賬號(hào)的appid。bucketname
是為存儲(chǔ)圖片創(chuàng)建的 bucket 的名稱,這里是名為weixintest
的 bucket。folder
可以指定到 bucket 下的某個(gè)目錄,本文指定到 /wxtest 目錄下。region
是指定上傳到 COS 的指定地區(qū),這里指定為tj
,即天津。目前COS 支持天津、上海、廣州。secret_key
、secret_id
是賬戶密鑰,用戶可以自行到騰訊云 COS 控制臺(tái)上獲取。
以上信息指定了開發(fā)目錄以及圖片要上傳到的 COS 的地址,完成這些配置,基本上已經(jīng)完工。
三、運(yùn)行瘦身工具
在命令行中執(zhí)行 wecos
命令。
可以看到,命令行顯示項(xiàng)目中的三個(gè)圖片上傳成功。翻看項(xiàng)目目錄,發(fā)現(xiàn)圖片已經(jīng)被刪除,代碼中的圖片引用也被換成了線上的地址,項(xiàng)目包一下子小了。同時(shí),WeCOS 很貼心的在開發(fā)項(xiàng)目外生成了個(gè) wecos_backup
目錄,來保存原來的圖片作為備份。除此之外,WeCOS 默認(rèn)啟用監(jiān)聽模式,這是為了讓開發(fā)過程中無感知,當(dāng)我們不再進(jìn)行項(xiàng)目開發(fā),停止運(yùn)行 WeCOS 即可。
被處理后的整個(gè)項(xiàng)目目錄只剩下不到5KB,用微信小程序開發(fā)者工具預(yù)覽小程序發(fā)現(xiàn)除了圖片部分的更改,其他部分跟處理之前沒有什么差別。此時(shí),可以重新上傳我們的小程序代碼,代碼很順利的上傳成功了。
到這里我們的瘦身也就基本完成了,但是 WeCOS 的能力還不僅于此,還有一些 高級(jí)功能 歡迎你來探索:
設(shè)置圖片后綴
有些時(shí)候,我們需要限制上傳圖片的格式,例如只允許 jpg 格式,可以通過WeCOS提供的圖片后綴配置項(xiàng)來定義 WeCOS默認(rèn)支持 jpg,png,gif 三種格式,假如還需要添加其他格式,例如 webp,可以在該配置項(xiàng)中添加
"uploadFileSuffix": [".jpg",".png",".gif",".webp"]
設(shè)置圖片黑名單
開發(fā)過程中,某些特定的圖片我們不希望被上傳,可以通過 WeCOS 的黑名單配置來解決這個(gè)問題,配置后上傳程序會(huì)自動(dòng)忽略掉這些圖片 黑名單配置支持目錄或具體到文件名的寫法:
"uploadFileBlackList": ["./images/logo.png", "./logo/"]
自定義域名
如果希望 COS 文件鏈接使用自定義的域名,可以配置 targetHost
代替默認(rèn)域名,可以省略 http://
:
"targetHost": "http://example.com"
如果代碼中的圖片鏈接想換一個(gè)域名,可以配置 replaceHost targetHost 來實(shí)現(xiàn)。
"replaceHost": "http://wx-12345678.myqcloud.com
",
"targetHost": "https://example.com
"
開啟圖片壓縮
圖片上傳到 COS 之后雖然大大減輕了程序包的大小,但如果圖片自身體積過大,訪問速度也會(huì)影響到用戶體驗(yàn) WeCOS 還額外提供了基于騰訊云萬象優(yōu)圖的圖片壓縮功能。首先,需要在萬象優(yōu)圖控制臺(tái)創(chuàng)建 COS 的同名 bucket。然后,開啟該選項(xiàng),資源將被壓縮后上傳(注:如果圖片已經(jīng)小到一定程度,壓縮后大小可能不會(huì)變化)
"compress": true
設(shè)置實(shí)時(shí)監(jiān)聽
WeCOS 默認(rèn)實(shí)時(shí)監(jiān)聽項(xiàng)目目錄變化,自動(dòng)處理圖片資源,在開發(fā)過程中,如果覺得實(shí)時(shí)監(jiān)聽不方便,或者只需要一次性處理就停止,可以修改該配置,程序?qū)⒅粫?huì)執(zhí)行一次后退出
"watch": false
原創(chuàng)聲明,本文系作者授權(quán)云+社區(qū)-專欄發(fā)表,未經(jīng)許可,不得轉(zhuǎn)載。
如有侵權(quán),請(qǐng)聯(lián)系z(mì)[email protected]刪除。
編輯于 5 小時(shí)前
相關(guān)案例查看更多
相關(guān)閱讀
- .net網(wǎng)站
- 網(wǎng)站建設(shè)電話
- 小程序開發(fā)平臺(tái)前十名
- 網(wǎng)站建設(shè)開發(fā)
- 做小程序被騙
- 微信小程序
- 網(wǎng)站優(yōu)化公司
- 出入小程序
- 開發(fā)框架
- 百度小程序
- 網(wǎng)站建設(shè)選
- 網(wǎng)站建設(shè)服務(wù)
- 小程序開發(fā)公司
- 小程序生成海報(bào)
- 表單
- 政府網(wǎng)站建設(shè)服務(wù)
- 云南百度小程序
- 網(wǎng)站上首頁
- 麗江小程序開發(fā)
- 云南軟件開發(fā)
- 小程序開發(fā)排名前十名
- 百度小程序公司
- 人人商城
- 云南小程序開發(fā)課程
- 云南網(wǎng)站建設(shè)外包
- 商標(biāo)
- 文山小程序開發(fā)
- 排名
- 網(wǎng)站建設(shè)
- 網(wǎng)絡(luò)公司報(bào)價(jià)