三步瘦身，做名副其實的「小程序」

小程序發布后，相信很多人已經蠢蠢欲動，心急的小伙伴更是已經操起小程序開發工具擼了起來。至于小程序是什么東西，在這幾天朋友圈的狂轟亂炸后相信大家已經比較清楚，不清楚的可以點擊

https://mp.weixin.qq.com/cgi-...

但小程序作為新興的東西，開發中一定會遇到一些坑，為了造福廣大開發者，騰訊云為小程序量身打造了相關解決方案，今天就手把手帶著大家使用微信小程序解決方案之一：瘦身方案WeCOS

https://github.com/tencentyun...

為什么我們需要 WeCOS ？

為了提升小程序體驗流暢度，編譯后的代碼包大小需小于 1MB ，大于 1MB 的代碼包將上傳失敗。

上面這段話是在小程序官方文檔里給出的，每個項目不能超過 1MB，超過 1MB 會導致項目文件在上傳的時候上傳失敗，如圖 1。在我們平時的開發中，通常會引用大量本地圖片資源。而大家都知道，圖片就是資源占用的元兇，它隨時能讓包的大小超過10MB、100MB。

圖1. 開發者工具在上傳時不允許代碼包超過1MB

常見的解決方法是：把圖片傳到圖床進行存儲，刪掉本地圖片，然后替換圖片引用的地址。但是目前小程序開發者工具的功能還比較單一，無法批量替換。用戶要么需要使用其他編輯器替換項目文件中圖片的引用地址為線上地址，要么手動去替換。但這兩種方式對于開發者而言都比較繁瑣，在修改引用的同時還需要小心翼翼，因為在大量操作的過程中難免會引入其他問題。

為此，騰訊云官方提出了該問題的解決方案：WeCOS。

什么是 WeCOS 呢？

WeCOS 是一個本地命令行工具（也提供 npm 包），主要用于幫助開發者解決小程序包超過大小限制的問題。WeCOS 不僅支持自動將小程序項目的圖片資源上傳到配置好的騰訊云對象存儲服務(COS)上存儲，同時，還可以自動替換項目代碼中本地資源引用地址為線上 URL，并移除項目目錄中的圖片資源。為小程序項目包瘦身，一鍵解決項目包超過 1MB 的煩惱。

開始使用

我們有一個開發好的小程序開發目錄「app」，目錄大小為 10M。目錄下有大量圖片且代碼中有對圖片資源的引用。為了能夠上傳并正常運行項目代碼，下面來示范如何使用騰訊云 WeCOS 來解決項目包過大的問題。項目目錄如圖 2。

圖2. 待處理的開發目錄

根據 WeCOS 的使用指引，只需三步，使用十分簡單。

第一步，前期準備

注冊騰訊云賬號，開通 COS 并創建 Bucket。

在本機上安裝 Node.js 的環境。

第二步，安裝 WeCOS 并修改配置文件

在命令行中使用 node.js 自帶的 npm 工具，輸入 npm install wecos -g ，等待完成安裝。-g 表示全局安裝，這樣才能全局調用 wecos 命令，安裝如圖 3。

圖3. 命令行輸入安裝wecos

根據指引，在與開發目錄 app 同目錄下創建一個 wecos.config.json 配置文件，在配置里填寫基本的配置信息。配置文件如圖 4。

圖4. 同目錄下創建wecos.config.json文件

wecos.config.json 里填寫了最基本的配置項，如圖 5。

其中，

• appDir 指定了小程序開發目錄。

• appid 為騰訊云賬號的 appid。

• bucketname 是為存儲圖片創建的 bucket 的名稱，這里是名為「weixintest」的bucket。

• folder 可以指定到 bucket 下的某個目錄，本文指定到「/wxtest」目錄下。

• region 是指定上傳到 COS 的指定地區，這里指定為「tj」，即天津。目前 COS 支持天津、上海、廣州。

• secret_key、secret_id 是賬戶密鑰，用戶可以自行到騰訊云 COS 控制臺上獲取。

以上信息指定了開發目錄以及圖片要上傳到的 COS 的地址，完成這些配置，基本上已經完工。

圖5. wecos.config.json的配置

第三步，運行程序

最后，我們在命令行中執行 wecos 命令，如圖 6。

圖6. 執行wecos命令

可以看到，命令行顯示項目中的三個圖片上傳成功。翻看項目目錄，發現圖片已經被刪除，代碼中的圖片引用也被換成了線上的地址，項目包一下子小了。同時，WeCOS 很貼心的在開發項目外生成了個 wecos_backup 目錄，來保存原來的圖片作為備份。除此之外，WeCOS 默認啟用監聽模式，這是為了讓開發過程中無感知，當我們不再進行項目開發，停止運行 WeCOS 即可。目錄如圖 7。

圖7. WeCOS處理后的項目

被處理后的整個項目目錄只剩下不到 5KB，用微信小程序開發者工具預覽我們的小程序發現除了圖片部分的更改，其他部分跟處理之前沒有什么差別。此時，我們可以重新上傳我們的小程序代碼，代碼很順利的上傳成功了，1MB 的限制什么的不再是問題。如圖 8。

圖8. 處理后的代碼包被上傳成功

除了基礎配置之外，WeCOS 還提供一些個性化的高級配置（說是高級配置，使用起來其實也是十分簡便）。如自定義域名替換，匹配的圖片文件后綴，是否開啟圖片壓縮等等

以上為大家介紹了一遍 WeCOS 的基本用法。相信如此方便實用、短小精悍的工具一定能幫助大家更方便的創建微信小程序。

 

 

來自：https://segmentfault.com/a/1190000008132184