盡管 4 月份微信官方將小程序的大小限制從 1M 放開(kāi)到 2M，但是對(duì)于使用大量圖片的小程序（電商等）來(lái)說(shuō)，2M 的限制還是顯得拮據(jù)。基于這種場(chǎng)景，騰訊云微信小程序解決方案團(tuán)隊(duì)開(kāi)發(fā)了 WeCOS 小程序瘦身工具，依托騰訊云強(qiáng)大的云對(duì)象儲(chǔ)存（COS），提供自動(dòng)將小程序內(nèi)部的圖片自動(dòng)上傳到 COS，并將圖片的相對(duì)路徑改為線上 URL，這樣就可以大大的縮減小程序的大小，并且無(wú)需過(guò)多繁瑣的上傳步驟。

現(xiàn)在我們就一起來(lái)看看如何使用吧！假設(shè)我們有一個(gè)開(kāi)發(fā)好的小程序開(kāi)發(fā)目錄 App，目錄大小為10M。目錄下有大量圖片且代碼中有對(duì)圖片資源的引用。為了能夠上傳并正常運(yùn)行項(xiàng)目代碼，下面來(lái)示范如何使用騰訊云 WeCOS 來(lái)解決項(xiàng)目包過(guò)大的問(wèn)題。項(xiàng)目目錄如圖。

接下來(lái)只需要 3 步，就可以完成小程序瘦身。

一、前期準(zhǔn)備

1. 注冊(cè)騰訊云賬號(hào)，開(kāi)通COS 并創(chuàng)建 Bucket。

2. 在本機(jī)上安裝 Node.js 。

二、安裝 WeCOS 并創(chuàng)建配置

打開(kāi)命令行（開(kāi)始-運(yùn)行-CMD-回車），使用 NPM 安裝 WeCOS。如圖所示：

npm install wecos -g

在與開(kāi)發(fā)目錄 app 同目錄下創(chuàng)建一個(gè) wecos.config.json 配置文件，在配置里填寫(xiě)基本的配置信息。

wecos.config.json 里填寫(xiě)了最基本的配置項(xiàng)。 其中，

  • appDir 指定了小程序開(kāi)發(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)上獲取。

以上信息指定了開(kāi)發(fā)目錄以及圖片要上傳到的 COS 的地址，完成這些配置，基本上已經(jīng)完工。

三、運(yùn)行瘦身工具

在命令行中執(zhí)行 wecos 命令。

可以看到，命令行顯示項(xiàng)目中的三個(gè)圖片上傳成功。翻看項(xiàng)目目錄，發(fā)現(xiàn)圖片已經(jīng)被刪除，代碼中的圖片引用也被換成了線上的地址，項(xiàng)目包一下子小了。同時(shí)，WeCOS 很貼心的在開(kāi)發(fā)項(xiàng)目外生成了個(gè) wecos_backup 目錄，來(lái)保存原來(lái)的圖片作為備份。除此之外，WeCOS 默認(rèn)啟用監(jiān)聽(tīng)模式，這是為了讓開(kāi)發(fā)過(guò)程中無(wú)感知，當(dāng)我們不再進(jìn)行項(xiàng)目開(kāi)發(fā)，停止運(yùn)行 WeCOS 即可。

被處理后的整個(gè)項(xiàng)目目錄只剩下不到5KB，用微信小程序開(kāi)發(fā)者工具預(yù)覽小程序發(fā)現(xiàn)除了圖片部分的更改，其他部分跟處理之前沒(méi)有什么差別。此時(shí)，可以重新上傳我們的小程序代碼，代碼很順利的上傳成功了。

到這里我們的瘦身也就基本完成了，但是 WeCOS 的能力還不僅于此，還有一些 高級(jí)功能 歡迎你來(lái)探索：

設(shè)置圖片后綴

有些時(shí)候，我們需要限制上傳圖片的格式，例如只允許 jpg 格式，可以通過(guò)WeCOS提供的圖片后綴配置項(xiàng)來(lái)定義 WeCOS默認(rèn)支持 jpg,png,gif 三種格式，假如還需要添加其他格式，例如 webp，可以在該配置項(xiàng)中添加

"uploadFileSuffix": [".jpg",".png",".gif",".webp"]

設(shè)置圖片黑名單

開(kāi)發(fā)過(guò)程中，某些特定的圖片我們不希望被上傳，可以通過(guò) WeCOS 的黑名單配置來(lái)解決這個(gè)問(wèn)題，配置后上傳程序會(huì)自動(dòng)忽略掉這些圖片 黑名單配置支持目錄或具體到文件名的寫(xiě)法：

"uploadFileBlackList": ["./images/logo.png", "./logo/"]

自定義域名

如果希望 COS 文件鏈接使用自定義的域名，可以配置 targetHost 代替默認(rèn)域名，可以省略 http:// ： 

"targetHost": "http://example.com"

如果代碼中的圖片鏈接想換一個(gè)域名，可以配置 replaceHost targetHost 來(lái)實(shí)現(xiàn)。

"replaceHost": "<code>http://wx-12345678.myqcloud.com</code>",
"targetHost": "<code>http://example.com</code>"

開(kāi)啟圖片壓縮

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

"compress": true

設(shè)置實(shí)時(shí)監(jiān)聽(tīng)

WeCOS 默認(rèn)實(shí)時(shí)監(jiān)聽(tīng)項(xiàng)目目錄變化，自動(dòng)處理圖片資源，在開(kāi)發(fā)過(guò)程中，如果覺(jué)得實(shí)時(shí)監(jiān)聽(tīng)不方便，或者只需要一次性處理就停止，可以修改該配置，程序?qū)⒅粫?huì)執(zhí)行一次后退出

"watch": false

原創(chuàng)聲明，本文系作者授權(quán)云+社區(qū)-專欄發(fā)表，未經(jīng)許可，不得轉(zhuǎn)載。

如有侵權(quán)，請(qǐng)聯(lián)系z(mì)huanlan_guanli@qq.com刪除。

編輯于 5 小時(shí)前