前端工程化漫談

文章源於我在公司內部的培訓和分享，與其說是一篇文章，不如說更像是一個大綱。喜歡的話能夠關注 個人 Github 主頁，若有疑問歡迎在文章下方評論或在 Github 原文處提交 Issue

一. 什麼是前端工程化？

概念

前端工程化，是隨着近幾年前端項目變得愈來愈複雜，才提出的一個概念，這個概念在軟件工程領域裏面，其實並不新鮮。

從我我的角度理解，前端工程化是前端開發的一種思惟方式，是針對前端開發過程當中所遇到的一系列問題的解決方案，如：組件化、軟件質量、可維護性、團隊協做、開發效率、測試效率、構建效率、自動化等。

我建議你們用上帝視角來看待「前端工程化」這個概念，以俯視的角度來觀察整個前端團隊運做的方方面面，而後你們會發現有一個核心貫穿始終，那就是：效率。

因此，前端工程化就能夠簡化理解爲 前端效率提高。

何爲效率？

效率分爲兩種： 人的效率（時間緯度） 和 代碼的效率（質量緯度）

• 人的效率：開發效率、構建效率、自動化水平
• 代碼的效率：運行效率、維護效率、測試效率

接下來會圍繞 效率 展開前端工程化的各個方面。

二. 爲何須要前端工程化？

綜上所述，一句話總結👇

前端工程化是爲了解決前端項目開發過程當中的各類效率問題

三. 前端工程化須要具有什麼樣的能力?

因爲涉及到的知識點衆多，如下內容僅作拋磚引玉，所涉及到的各個方面能夠根據我的需求自行查閱資料，這裏不作展開。

從人的效率出發：時間緯度

人的效率主要受 開發效率、構建效率 和 自動化水平 的影響。

1. 開發效率

技術選型

好比前端框架的選擇，如 React, Vue, Angular, Ember, Svelte 等，就能夠按照以下思路考慮：

• 團隊成熟度，如問題解決的速度和能力
• 軟件成熟度
• 社區活躍度
• 軟件擴展性
• 軟件文檔友好程度
• 軟件更新速度
• 一些坑的預判（避免過於新的技術採用？能夠用於試驗，可是不要用於大型項目，難以迭代更新）
• 相關人才儲備

以此類推，其餘庫或軟件的選擇，都可按照相同方法來判斷。

代碼規範

• 代碼編寫規範
• Git提交規範
• 代碼審覈規範

腳手架

• 善於評估、學習和使用各種腳手架，有助於節約構建新項目的大量時間，如：create-react-app, vue-cli, taro, ewa 等

雲開發、低代碼和無代碼開發

降本增效的利器。

• 雲開發：如小程序雲開發、Leancloud等服務，能夠下降對後端開發的依賴，提升前端開發效率
• 低代碼和無代碼： 如百度的 amis 低代碼框架 和 node-red 無代碼可視化編程工具

調試效率

• 瞭解前端的各種 debug 方式
• 使用 sourceMap 等工具，來查看源代碼
• 使用如 Eslint 等代碼檢查工具

2. 構建效率

構建工具

• 老牌: Grunt, Gulp
• 熱門: Webpack, Rollup
• 新的: Snowpack, Vite

構建效率

• 上述構建工具的相關配置、熱更新、構建速度優化、插件定製等，重點關注熱門和新的兩類構建工具。

3. 自動化水平

• 前端自動化: Jenkins，Gitlab, Travis-CI, Github Actions
• 部署效率優化 和 部署流程優化

從代碼的效率出發：質量緯度

代碼的效率主要受 運行效率、維護效率 和 測試效率 的影響

1. 運行效率

• 性能優化: JS/CSS 執行性能，內存耗用
• 資源加載速度優化(壓縮大小，Gzip，CDN，延遲加載，按需加載等)
• 瀏覽器渲染優化

2. 維護效率

• 代碼規範
• 文檔
• 組件化
• 分層、抽象、解耦
• 代碼版本管理

3. 測試效率

• 接口數據 Mock
• 單元測試、功能測試、自動化測試

最後2條不成熟的小建議

1. MDN 是個好東西，沒事多翻翻 傳送門 👉
2. 多思考，多動手，不盲從（我說的，也不必定是對的！）

🔗 原文地址