18&

12月

通過 WeCOS 進(jìn)行小程序瘦身

1786

盡管 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": "<code>http://wx-12345678.myqcloud.com</code>",
"targetHost": "<code>http://example.com</code>"

開啟圖片壓縮

圖片上傳到 COS 之后雖然大大減輕了程序包的大小，但如果圖片自身體積過大，訪問速度也會(huì)影響到用戶體驗(yàn) WeCOS 還額外提供了基于騰訊云萬象優(yōu)圖的圖片壓縮功能。首先，需要在萬象優(yōu)圖控制臺(tái)創(chuàng)建 COS 的同名 bucket。然后，開啟該選項(xiàng)，資源將被壓縮后上傳（注：如果圖片已經(jīng)小到一定程度，壓縮后大小可能不會(huì)變化）