詳解基于Wepy開發小程序插件(推薦)

2019-11-19 11:05:36

字體：大中小

來源：轉載

供稿：網友

開發

wepy-plugin-autopages

使用 wepy 開發項目時不需要手動配置 app.wpy 下的 config.pages，autopages 插件會自動監控 pages 目錄下文件的變化，自動生成更新對應 app.json 下的 pages。

注意：該插件只會對編譯文件dist里配置添加，源文件是不會改動的。
注意：我還發現有個問題是他是按命名順序添加的，所以開發階段可以用客戶端指定路徑，但是發布的話還是乖乖手動添加吧

這插件看情況使用吧，如果是個人項目的話我覺得還是值得用的，畢竟每次新增頁面都要手動添加很繁瑣，但是如果是合作項目開發到某個階段的時候還是手動填上去吧，因為便于其他人可以知道你項目的所有跳轉路徑有哪些。

plugins: [ autopages: {}]

wepy-plugin-px2units

將 px 單位轉換為 rpx 單位，或者其他單位的 PostCSS插件。

plugins: { px2units: {  filter: /.wxss$/ }},

注意：根據實驗所得只對wxss文件起作用，在wxml的行內樣式不改變。

//輸入.userinfo-nickname { width: 200px; height: 200px;/*no*/ margin: 200rpx;}

//輸出.userinfo-nickname { width: 200rpx; height: 200px; margin: 200rpx;}

略微有點雞肋，雖然會節省一點微不足道的代碼量，但是它本身還是有些可能需要用到的配置項的。

配置項	作用
divisor(Number): 除數	轉換后的值等于 pixel / divisor
multiple(Number): 倍數	轉換后的值等于 pixel * multiple
decimalPlaces(Number)	小數點后保留的位數
comment(String)	不轉換px單位的注釋，默認為 /no/
targetUnits(String)	轉換單位，默認值為 rpx

wepy-plugin-replace

文本替換,為 plugins 添加 replace 對象，支持單個或者多個規則，多個規則可以以 Array 或者 Object 實現，filter 的對象為生成后文件的路徑，例如'dist/app.js'，每個規則也同時支持多個替換條目，同樣是以 Array 或者 Object 實現。

module.exports.plugins = { 'replace': {  filter: /moment/.js$/,  config: {   find: /([/w/[/]a-d/.]+)/s*instanceof Function/g,   replace: function (matchs, word) {    return ' typeof ' + word + " ==='function' ";   }  } }};

用法很簡單，指定后綴文件匹配規則替換函數。

生產

就以我的一個項目為例，在不用插件的情況下打包體積是6.04M。

然后看看怎么一步步將其體積減少。

wepy-plugin-uglifyjs

JS壓縮插件

module.exports.plugins = { 'uglifyjs': {  filter: //.js$/,  config: {  } },};

因為小程序基本JS代碼為主，所以這個效果非常可觀，文檔只寫了這個用法，還有很多自定義選項需要自己去研究，文檔給出的參數說明鏈接是UglifyJS2，即使如此，單單JS一項都好厲害。

使用前	使用后	壓縮率
6.04M	2.76M	45.69%

wepy-plugin-filemin

文件壓縮插件支持css，xml，json

module.exports.plugins = { 'filemin': {  filter: //.(json|wxml|xml)$/ }};

使用前	使用后	壓縮率
2.76M	2.72M	98.55%

唔。。。

有點尷尬，那點體積真的微不足道，一來樣式本來就不多，二來css本身壓縮空間有限，不可能把樣式屬性簡化吧，聊勝于無。

wepy-plugin-imagemin

圖片壓縮插件

module.exports.plugins = { 'imagemin': {  filter: //.(jpg|png|jpeg)$/,  config: {   'jpg': {    quality: 80   },   'png': {    quality: 80   }  } }};

參數說明請看imagemin

使用前	使用后	壓縮率
2.72M	2.24M	82.35%

不得不說還是可以的，基本用法大家用過打包器都不陌生就不說了,直到某一天騰訊出了一款重量大殺器，請看看下面――

WeCOS

騰訊推出的小程序瘦身工具，通過 WeCOS，小程序項目中的圖片資源會自動上傳到 COS 上，且 WeCOS 自動替換代碼中圖片資源地址的引用為線上地址，移除項目目錄中的圖片資源，從而減小代碼包大小，解決包大小超過限制的問題。

前期準備工作：

進入騰訊云官網，注冊騰訊云賬戶，指引參考注冊騰訊云。
登錄對象存儲控制臺，開通對象存儲服務，創建存儲桶，指引參考創建存儲桶
通過 GitHub 地址下載 WeCOS 工具。
在 Node.js 官網下載環境并安裝。

我就默認你們都搞好了前期，然后我們先安裝插件

npm install wecos -g

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

appDir 指定了小程序開發目錄。
appid 為騰訊云賬號的appid。
bucketname 是為存儲圖片創建的 bucket 的名稱，這里是名為 weixintest 的 bucket。
folder 可以指定到 bucket 下的某個目錄，本文指定到 /wxtest 目錄下。
region 是指定上傳到 COS 的指定地區，這里指定為 tj ，即天津。目前COS 支持天津、上海、廣州。
secret_key、secret_id是賬戶密鑰，用戶可以自行到騰訊云 COS 控制臺上獲取。

之后直接運行命令

wecos

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

和wepy-plugin-imagemin相比。