使用 webpack 的各種外掛提升你的開發效率

lentoo發表於2019-03-13
Web

專案地址 vue-admin 歡迎 star

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

前沿

近幾個月，接手了一個老專案的重構規劃，有多老呢？就是前端青銅時代的專案，一個前後端都在同一個鍋裡的專案、完全沒有使用任何的打包工具。

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

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

後來我也開始負責這個專案的需求開發。做了幾個需求後，對於我一個用習慣了ES6 加 webpack 模組化開發來說，感覺想吐血啊。

使用 webpack 的各種外掛提升你的開發效率

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

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

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

image.png

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

image.png

使用 webpack 的各種外掛提升你的開發效率

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

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

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 圖片壓縮之前，我們都是使用 某個線上圖片壓縮網站，將圖片丟進去，然後生成一個壓縮後的圖片來使用。 如果只有一兩張圖片還好說，如果有很多張圖片，這種方法效率肯定是不高的。

為了避免不加班，必須要自動化。解放自己雙手。

使用 webpack 的各種外掛提升你的開發效率

  • 安裝所需要的庫
npm install img-loader imagemin imagemin-jpegtran imagemin-pngquant --save-dev
複製程式碼
  • 在vue.config.js中配置

carbon.png

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

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

loginbg.jpg

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

loginbg.compression.jpg

基本上看不出來差別。

注意：儘量在 production 環境在壓縮，在 dev 環境下沒必要壓縮，影響打包速度。

4. 精靈圖

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

4.1 精靈圖自動合成

  • 安裝依賴

npm install postcss-sprites --save-dev

  • 在 postcss.config.js 中新增配置

carbon.png

然後在程式碼中，直接引用圖片即可

carbon.png

4.1 精靈圖分組

如果引用的小圖片很多，最終會導致生成的精靈圖很大。這時候就需要將精靈圖進行分組了。相同模組的精靈圖合成一張。同理

  • 修改 postcss.config.js 的配置，新增 groupBy 屬性

carbon.png

如果需要分組，只需在 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 檔案配置

carbon.png

通過 F12 可以發現，所有 px 單位都轉成了 vw

image.png

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

記得有一個需求是刪除專案中所有的 console.log 程式碼，當時就懵逼了，頁面這麼多。

使用vscode 全域性搜尋，發現有幾十個頁面有這個語句。

如果全部手動刪除的話，又費時，又沒效率。所以想到通過外掛來刪除

  • 安裝需要的庫

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

  • 修改 babel.config.js 配置

carbon.png

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

7. 其它優化

  1. vue-cli3 專案從搭建優化到docker部署

如果大家還有什麼更好的實踐方式，歡迎評論區指教！！

專案地址 vue-admin 歡迎 star

使用 webpack 的各種外掛提升你的開發效率

歡迎關注

歡迎關注公眾號“碼上開發”，每天分享最新技術資訊

image

相關文章