前端工程化建設

更多文章

隨着瀏覽器和前端技術的發展，如今的前端項目愈來愈大、業務也愈來愈複雜，前端工程化已經成爲一件勢在必行的事情。

前端工程化其實就是軟件工程在前端方向上的實施，不過篇幅有限，本文只講解其中的幾個點。

團隊規範

若是前端團隊只有一兩我的，規範的做用微乎其微；但團隊人數超過必定數量時，規範的做用就顯現出來了。舉個例子，拿代碼風格規範來講，有些人喜歡用兩個空格縮進，有些人喜歡用四個空格縮進，若是這兩我的合做寫一個項目，即便嘴上不說，內心也會相互吐槽。因此統一規範是很是有必要的，在制定規範前，你們能夠相互討論，提意見；規範制定後，全部人都得遵照，強制執行。

本文說的規範主要包括如下幾種：

• 代碼規範
• UI 規範
• 項目結構規範
• git commit 規範

代碼規範

代碼規範的好處

• 規範的代碼能夠促進團隊合做
• 規範的代碼能夠下降維護成本
• 規範的代碼有助於代碼審查
• 養成代碼規範的習慣，有助於程序員自身的成長

每一個程序員都不喜歡修改別人的代碼，不管代碼好壞，由於第一眼看上去沒有熟悉感，下意識就會排斥。

因此當團隊的成員都嚴格按照代碼規範來寫代碼時，能夠保證每一個人的代碼看起來都像是一我的寫的，看別人的代碼就像是在看本身的代碼。

重要的是咱們可以認識到規範的重要性，並堅持規範的開發習慣。

• 百度前端代碼規範
• Airbnb 翻譯版
• 如何編寫高質量代碼

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 （頁面）

每一個前端團隊的項目命名及組織方式均可能不同，以上僅提供參考。

• Vue 風格指南

git commit 規範

良好的 git commit 規範，讓人只看描述就能明白這個 commit 是幹什麼的，提升解決 BUG 的效率。

推薦閱讀： git commit 提交規範。

其餘規範

除了上述幾個規範，還有：

• 先後端接口規範
• 文檔規範
• 代碼分支規範

...

因爲篇幅有限，而且研究不深，就只能到這了。

執行

規範制定下來了，如何保證執行？

基本上都得靠代碼審查以及測試人員測試，不過代碼規範有一個工具能用得上，那就是 vscode + eslint 自動格式化代碼。

推薦閱讀： ESlint + VSCode自動格式化代碼(2020)。

性能優化

前端性能優化是一個老生常談的問題，網上關於性能優化的文章與書籍也有不少。我以前還寫過一篇關於 JavaScript 性能優化的文章。

性能優化包括代碼優化和非代碼優化。

代碼優化

• 複用代碼
• 避免全局變量
• 使用事件委託
• 使用Object/Array字面量
• 位操做在JavaScript中性能很是快，可使用位運算來代替純數學操做

...

非代碼優化

• 減小HTTP請求次數
• 使用CDN
• 使用緩存
• 壓縮資源
• css 放頭部，js 放底部
• 減小 DOM 操做

...

推薦閱讀：

• 高性能網站建設指南
• 高性能網站建設進階指南
• Web性能權威指南

測試

測試是前端工程化建設必不可少的一部分，它的做用就是找出 bug，越早發現 bug，所須要付出的成本就越低。

在前端測試中，單元測試和集成測試通常用得比較多，工具也有不少，例如 Karma + Mocha + PhantomJS / Chai 等。

可是自動化測試工具能夠說幾乎沒有，由於 UI 界面自動化測試太難了，目前只能靠人工測試。

• 張雲龍-如何進行前端自動化測試？
• Jest
• Mocha
• Karma

構建、部署

得益於 node 和 webpack 的發展，自動化構建再也不是夢。經過 webpack 以及相關配置，一行命令就能夠作到下列全部事情：

• 代碼檢查
• 單元測試、集成測試
• 語言編譯
• 依賴分析、打包、替換等
• 代碼壓縮、圖片壓縮等

自動化部署經過 Jenkins、Docker 等工具也能夠很方便的實現。

推薦閱讀：yumminhuang-如何理解持續集成、持續交付、持續部署？

性能和錯誤監控

性能監控
前端頁面性能是一個很是核心的用戶體驗指標，影響到了用戶的留存率，若是一個頁面性能太差，用戶等待時間過長，頗有可能就直接離開了。

錯誤監控
由於測試永遠沒法作到100%覆蓋，用戶也不會老是按照咱們所預期的進行操做，所以當生產環境出現 bug 時，須要對其進行收集。

監控是前端工程化建設中的最後一環，當項目上線後，經過監控系統能夠了解到項目在生產環境中的運行狀況，開發團隊能夠根據監控報告對項目作進一步的調整和優化。

目前市面上有大量成熟的監控產品可使用，對於沒有精力開發監控系統的團隊來講，能夠算是一個好消息。此前我還針對監控系統進行了一番調查和研究，並寫了一篇文章，對監控系統原理有興趣的能夠看一下，前端性能和錯誤監控。