使用 webpack 的各類插件提高你的開發效率

項目地址 vue-admin 歡迎 star

原文地址 www.ccode.live/lentoo/list…

前沿

近幾個月，接手了一個老項目的重構規劃，有多老呢？就是前端青銅時代的項目，一個先後端都在同一個鍋裏的項目、徹底沒有使用任何的打包工具。

• 後臺 php + YII 渲染頁面
• 前端 html、css、js三劍客 加上 jQuery 複製粘貼就是幹。

前端不夠後端來湊。若是前端有一些需求不是很複雜的話，後端人員有時候也會兼顧的幹一些前端的活。

後來我也開始負責這個項目的需求開發。作了幾個需求後，對於我一個用習慣了ES6 加 webpack 模塊化開發來講，感受想吐血啊。

前端一個JS文件文件 少說 2000 行代碼，多則 4-5000，代碼多也就算了，關鍵是 寫的代碼沒有任何規範，從文件開始就是

function funName () {}
function funName () {}
function funName () {}
...
// 或者是
$(function(){})
$(function(){})
$(function(){})
...
複製代碼

這也就算了，關鍵是 一個 ajax的回調處理就有 ... 6-700 行代碼

後來我看了下這麼長的代碼是要處理什麼，結果一看 ... 原來一個for循環就佔了600多行代碼了。

算了，不想再說了，越說越心累。

畢竟拿人錢財，替人消災。活仍是要乾的。

1. 重構規劃

這種項目最大的一個問題就是沒有模塊化開發，全部功能都寫在一個js文件裏。在開發了幾個需求後、總結了有如下幾個效率比較低的流程。

現存在的問題

1. 沒有模塊化開發，一個js文件幾千行代碼。代碼複用率低。據說有些公司有 上萬行代碼的。求他們的心理陰影面積
2. PHP的各類模板語法，前端人員表示看不懂
3. 全部資源文件都是手動添加版本號
4. 精靈圖須要手動合成 （這個最坑，效率特別低）
5. 圖片壓縮也是手動壓縮
6. 控制檯各類console.log的輸出
7. ...

2. 接入模塊化開發

考慮到目前團隊的前端水平不是很高，因此使用 容易上手的 vue，而後使用 vue-cli3搭建一個 vue 項目，而後在進行一些配置以兼容現有項目，這些配置根據項目的不一樣，也是不一樣的，因此這裏不展開細說。

其實使用 vue-cli3搭建起來的項目，已經幫咱們解決了大部分的問題。

1. 模塊化的開發，vue 自己支持模塊化開發
2. 資源文件都是手動添加版本號，使用webpack打包後的文件名會有 hash值。因此也解決了版本號的問題。

因此下面咱們來解決 vue-cli3沒有幫咱們解決的問題

3. 圖片壓縮

在未接入 webpack 圖片壓縮以前，咱們都是使用 某個在線圖片壓縮網站，將圖片丟進去，而後生成一個壓縮後的圖片來使用。 若是隻有一兩張圖片還好說，若是有不少張圖片，這種方法效率確定是不高的。

爲了不不加班，必需要自動化。解放本身雙手。

• 安裝所須要的庫

npm install img-loader imagemin imagemin-jpegtran imagemin-pngquant --save-dev
複製代碼

• 在vue.config.js中配置

而後看看打包後的效果 npm run build

• 未壓縮的圖片 圖片大小 622kb

• 壓縮後的圖片 圖片大小 351kb

基本上看不出來差異。

注意：儘可能在 production 環境在壓縮，在 dev 環境下不必壓縮，影響打包速度。

4. 精靈圖

在未接入 webpack 自動合成精靈圖以前，咱們都是使用 某個在線合成精靈圖網站，將一堆小圖片丟進去，而後本身測量 background-position 來定位背景圖。遇到多個圖片大小不同的時候。 background-position的計算更是麻煩。

4.1 精靈圖自動合成

• 安裝依賴

npm install postcss-sprites --save-dev

• 在 postcss.config.js 中添加配置

而後在代碼中，直接引用圖片便可

4.1 精靈圖分組

若是引用的小圖片不少，最終會致使生成的精靈圖很大。這時候就須要將精靈圖進行分組了。相同模塊的精靈圖合成一張。同理

• 修改 postcss.config.js 的配置，添加 groupBy 屬性

若是須要分組，只需在 assets/sprites 新建一個目錄，該目錄中的圖片會單獨的合成一張精靈圖

5. 使用 vw,vh 自適應

以前項目都是使用 px 做爲像素單位的，而且設計稿的尺寸是 1920x938.

在 1920*1080的屏幕上看是正常的，可是有些客戶的是筆記本電腦，使用筆記本電腦看的話就太大了。沒有作自適應。

若是要一個一個的把 px 轉成 rem 或者 vw/vh 的話，工做量也是很大。

有沒有工具直接能將如今的 px 直接轉成 vw/vh呢？

確定也是有的! postcss-px-to-viewport

• 安裝依賴

npm i postcss-px-to-viewport --save-dev

• 修改 postcss.config.js 文件配置

經過 F12 能夠發現，全部 px 單位都轉成了 vw

6. production 環境自動刪除console.log

記得有一個需求是刪除項目中全部的 console.log 代碼，當時就懵逼了，頁面這麼多。

使用vscode 全局搜索，發現有幾十個頁面有這個語句。

若是所有手動刪除的話，又費時，又沒效率。因此想到經過插件來刪除

• 安裝須要的庫

npm install babel-plugin-transform-remove-console --save-dev

• 修改 babel.config.js 配置

在 npm run build 的時候，就會自動刪除 console.log

7. 其它優化

1. vue-cli3 項目從搭建優化到docker部署

若是你們還有什麼更好的實踐方式，歡迎評論區指教！！

項目地址 vue-admin 歡迎 star

歡迎關注

歡迎關注公衆號「碼上開發」，天天分享最新技術資訊