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

開發

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;
}

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

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一項都好厲害。

wepy-plugin-filemin

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

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

唔。。。

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

wepy-plugin-imagemin

圖片壓縮插件

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

參數說明請看imagemin

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

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相比。

前者操作簡單無額外依賴，后者效率驚人，具體取舍看項目需要吧。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。