更多文章
隨着瀏覽器和前端技術的發展，現在的前端項目越來越大、業務也越來越複雜，前端工程化已經成爲一件勢在必行的事情。
前端工程化其實就是軟件工程在前端方向上的實施，不過篇幅有限，本文只講解其中的幾個點。
團隊規範
如果前端團隊只有一兩個人，規範的作用微乎其微；但團隊人數超過一定數量時，規範的作用就顯現出來了。舉個例子，拿代碼風格規範來說，有些人喜歡用兩個空格縮進，有些人喜歡用四個空格縮進，如果這兩個人合作寫一個項目，即使嘴上不說，心裏也會相互吐槽。所以統一規範是非常有必要的，在制定規範前，大家可以相互討論，提意見；規範制定後，所有人都得遵守，強制執行。
本文說的規範主要包括以下幾種：
- 代碼規範
- UI 規範
- 項目結構規範
- git commit 規範
代碼規範
代碼規範的好處
- 規範的代碼可以促進團隊合作
- 規範的代碼可以降低維護成本
- 規範的代碼有助於代碼審查
- 養成代碼規範的習慣，有助於程序員自身的成長
每個程序員都不喜歡修改別人的代碼，無論代碼好壞，因爲第一眼看上去沒有熟悉感，下意識就會排斥。
所以當團隊的成員都嚴格按照代碼規範來寫代碼時，可以保證每個人的代碼看起來都像是一個人寫的，看別人的代碼就像是在看自己的代碼。
重要的是我們能夠認識到規範的重要性，並堅持規範的開發習慣。
UI 規範
UI 規範需要前端、UI、產品溝通，互相商量，最後制定下來，建議使用統一的 UI 組件庫。
制定 UI 規範的好處：
- 統一頁面 UI 標準，節省 UI 設計時間
- 提高前端開發效率
項目結構規範
項目結構規範包括文件命名、文件目錄組織方式，用 Vue 項目舉個例子。
├─public
├─src
├─tests
一個項目包含 public（公共資源，不會被 webpack 處理）、src（源碼）、tests（測試），其中 src 目錄，又可以細分。
├─api （接口）
├─assets （靜態資源）
├─components （公共組件）
├─styles （公共樣式）
├─router （路由）
├─store （vuex）
├─utils （工具函數）
└─views （頁面）
每個前端團隊的項目命名及組織方式都可能不一樣，以上僅提供參考。
git commit 規範
良好的 git commit 規範，讓人只看描述就能明白這個 commit 是幹什麼的，提高解決 BUG 的效率。
推薦閱讀： git commit 提交規範。
其他規範
除了上述幾個規範，還有：
- 前後端接口規範
- 文檔規範
- 代碼分支規範
…
由於篇幅有限，並且研究不深，就只能到這了。
執行
規範制定下來了，如何保證執行？
基本上都得靠代碼審查以及測試人員測試，不過代碼規範有一個工具能用得上，那就是 vscode + eslint 自動格式化代碼。
推薦閱讀： ESlint + VSCode自動格式化代碼(2020)。
性能優化
前端性能優化是一個老生常談的問題，網上關於性能優化的文章與書籍也有很多。我之前還寫過一篇關於 JavaScript 性能優化的文章。
性能優化包括代碼優化和非代碼優化。
代碼優化
- 複用代碼
- 避免全局變量
- 使用事件委託
- 使用Object/Array字面量
- 位操作在JavaScript中性能非常快，可以使用位運算來代替純數學操作
…
非代碼優化
- 減少HTTP請求次數
- 使用CDN
- 使用緩存
- 壓縮資源
- css 放頭部，js 放底部
- 減少 DOM 操作
…
推薦閱讀：
測試
測試是前端工程化建設必不可少的一部分，它的作用就是找出 bug，越早發現 bug，所需要付出的成本就越低。
在前端測試中，單元測試和集成測試一般用得比較多，工具也有很多，例如 Karma + Mocha + PhantomJS / Chai 等。
但是自動化測試工具可以說幾乎沒有，因爲 UI 界面自動化測試太難了，目前只能靠人工測試。
構建、部署
得益於 node 和 webpack 的發展，自動化構建不再是夢。通過 webpack 以及相關配置，一行命令就可以做到下列所有事情：
- 代碼檢查
- 單元測試、集成測試
- 語言編譯
- 依賴分析、打包、替換等
- 代碼壓縮、圖片壓縮等
自動化部署通過 Jenkins、Docker 等工具也可以很方便的實現。
推薦閱讀：yumminhuang-如何理解持續集成、持續交付、持續部署？
性能和錯誤監控
性能監控
前端頁面性能是一個非常核心的用戶體驗指標，影響到了用戶的留存率，如果一個頁面性能太差，用戶等待時間過長，很有可能就直接離開了。
錯誤監控
因爲測試永遠無法做到100%覆蓋，用戶也不會總是按照我們所預期的進行操作，因此當生產環境出現 bug 時，需要對其進行收集。
監控是前端工程化建設中的最後一環，當項目上線後，通過監控系統可以瞭解到項目在生產環境中的運行情況，開發團隊可以根據監控報告對項目做進一步的調整和優化。
目前市面上有大量成熟的監控產品可以使用，對於沒有精力開發監控系統的團隊來說，可以算是一個好消息。此前我還針對監控系統進行了一番調查和研究，並寫了一篇文章，對監控系統原理有興趣的可以看一下，前端性能和錯誤監控。