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

時間 2019-11-07

標籤三步瘦身名副其實程序简体版

原文原文鏈接

小程序發佈後，相信不少人已經蠢蠢欲動，心急的小夥伴更是已經操起小程序開發工具擼了起來。至於小程序是什麼東西，在這幾天朋友圈的狂轟亂炸後相信你們已經比較清楚，不清楚的能夠點擊
https://mp.weixin.qq.com/cgi-... node

但小程序做爲新興的東西，開發中必定會遇到一些坑，爲了造福廣大開發者，騰訊云爲小程序量身打造了相關解決方案，今天就手把手帶着你們使用微信小程序解決方案之一：瘦身方案WeCOS
https://github.com/tencentyun...git

爲何咱們須要 WeCOS ？

爲了提高小程序體驗流暢度，編譯後的代碼包大小需小於 1MB ，大於 1MB 的代碼包將上傳失敗。github

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

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

常見的解決方法是：把圖片傳到圖牀進行存儲，刪掉本地圖片，而後替換圖片引用的地址。可是目前小程序開發者工具的功能還比較單一，沒法批量替換。用戶要麼須要使用其餘編輯器替換項目文件中圖片的引用地址爲線上地址，要麼手動去替換。但這兩種方式對於開發者而言都比較繁瑣，在修改引用的同時還須要當心翼翼，由於在大量操做的過程當中不免會引入其餘問題。小程序

爲此，騰訊雲官方提出了該問題的解決方案：WeCOS。微信小程序

什麼是 WeCOS 呢？

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

開始使用

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

圖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 還提供一些個性化的高級配置（說是高級配置，使用起來其實也是十分簡便）。如自定義域名替換，匹配的圖片文件後綴，是否開啓圖片壓縮等等。若是有須要能夠直接參考 https://github.com/tencentyun... 上的使用介紹。

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

更多技術乾貨請看騰訊雲技術社區