前沿 項目地址 "vue admin" 歡迎 star 近幾個月，接手了一個老項目的重構規劃，有多老呢？就是前端青銅時代的項目，一個前後端都在同一個鍋里的項目、完全沒有使用任何的打包工具。 後臺 + 渲染頁面 前端 、`css js jQuery` 複製粘貼就是乾。 前端不夠後端來湊。如果前端有一些 ...
前沿
項目地址 vue-admin 歡迎 star
近幾個月，接手了一個老項目的重構規劃，有多老呢？就是前端青銅時代的項目，一個前後端都在同一個鍋里的項目、完全沒有使用任何的打包工具。
- 後臺
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文件里。在開發了幾個需求後、總結了有以下幾個效率比較低的流程。
現存在的問題
- 沒有模塊化開發，一個
js文件幾千行代碼。代碼復用率低。聽說有些公司有 上萬行代碼的。求他們的心理陰影面積 PHP的各種模板語法，前端人員表示看不懂- 所有資源文件都是手動添加版本號
- 精靈圖需要手動合成 （這個最坑，效率特別低）
- 圖片壓縮也是手動壓縮
- 控制台各種
console.log的輸出 - ...
2. 接入模塊化開發
考慮到目前團隊的前端水平不是很高，所以使用 容易上手的 vue，然後使用 vue-cli3搭建一個 vue 項目，然後在進行一些配置以相容現有項目，這些配置根據項目的不同，也是不同的，所以這裡不展開細說。
其實使用 vue-cli3搭建起來的項目，已經幫我們解決了大部分的問題。
- 模塊化的開發，
vue本身支持模塊化開發 - 資源文件都是手動添加版本號，使用
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
如果大家還有什麼更好的實踐方式，歡迎評論區指教！！
項目地址 vue-admin 歡迎 star
