文章源于我在公司內(nèi)部的培訓和分享，與其說是一篇文章，不如說更像是一個大綱。喜歡的話可以關(guān)注 我的 Github 主頁，如有疑問歡迎在文章下方評論或在 Github 原文處提交 Issue
一. 什么是前端工程化？
概念
前端工程化，是隨著近幾年前端項目變得越來越復雜，才提出的一個概念，這個概念在軟件工程領(lǐng)域里面，其實并不新鮮。
從我個人角度理解，前端工程化是前端開發(fā)的一種思維方式，是針對前端開發(fā)過程中所遇到的一系列問題的解決方案，如：組件化、軟件質(zhì)量、可維護性、團隊協(xié)作、開發(fā)效率、測試效率、構(gòu)建效率、自動化等。
我建議大家用上帝視角來看待「前端工程化」這個概念，以俯視的角度來觀察整個前端團隊運作的方方面面，然后大家會發(fā)現(xiàn)有一個核心貫穿始終，那就是：效率。
所以，前端工程化就可以簡化理解為 前端效率提升。
何為效率？
效率分為兩種： 人的效率（時間緯度） 和 代碼的效率（質(zhì)量緯度）
- 人的效率：開發(fā)效率、構(gòu)建效率、自動化水平
- 代碼的效率：運行效率、維護效率、測試效率
接下來會圍繞 效率 展開前端工程化的各個方面。
二. 為什么需要前端工程化？
綜上所述，一句話總結(jié)??
前端工程化是為了解決前端項目開發(fā)過程中的各種效率問題
三. 前端工程化需要具備什么樣的能力?
由于涉及到的知識點眾多，以下內(nèi)容僅做拋磚引玉，所涉及到的各個方面可以根據(jù)個人需求自行查閱資料，這里不做展開。
從人的效率出發(fā)：時間緯度
人的效率主要受 開發(fā)效率、構(gòu)建效率 和 自動化水平 的影響。
1. 開發(fā)效率
技術(shù)選型
比如前端框架的選擇，如 React, Vue, Angular, Ember, Svelte 等，就可以按照如下思路考慮：
- 團隊成熟度，如問題解決的速度和能力
- 軟件成熟度
- 社區(qū)活躍度
- 軟件擴展性
- 軟件文檔友好程度
- 軟件更新速度
- 一些坑的預判（避免過于新的技術(shù)采用？可以用于試驗，但是不要用于大型項目，難以迭代更新）
- 相關(guān)人才儲備
以此類推，其他庫或軟件的選擇，均可按照相同方法來判斷。
代碼規(guī)范
- 代碼編寫規(guī)范
- Git提交規(guī)范
- 代碼審核規(guī)范
腳手架
- 善于評估、學習和使用各類腳手架，有助于節(jié)約構(gòu)建新項目的大量時間，如：
create-react-app,vue-cli,taro,ewa等
云開發(fā)、低代碼和無代碼開發(fā)
降本增效的利器。
- 云開發(fā)：如小程序云開發(fā)、Leancloud等服務，可以降低對后端開發(fā)的依賴，提高前端開發(fā)效率
- 低代碼和無代碼： 如百度的
amis低代碼框架 和node-red無代碼可視化編程工具
調(diào)試效率
- 了解前端的各類 debug 方式
- 使用 sourceMap 等工具，來查看源代碼
- 使用如 Eslint 等代碼檢查工具
2. 構(gòu)建效率
構(gòu)建工具
- 老牌: Grunt, Gulp
- 熱門: Webpack, Rollup
- 新的: Snowpack, Vite
構(gòu)建效率
- 上述構(gòu)建工具的相關(guān)配置、熱更新、構(gòu)建速度優(yōu)化、插件定制等，重點關(guān)注熱門和新的兩類構(gòu)建工具。
3. 自動化水平
- 前端自動化: Jenkins，Gitlab, Travis-CI, Github Actions
- 部署效率優(yōu)化 和 部署流程優(yōu)化
從代碼的效率出發(fā)：質(zhì)量緯度
代碼的效率主要受 運行效率、維護效率 和 測試效率 的影響
1. 運行效率
- 性能優(yōu)化: JS/CSS 執(zhí)行性能，內(nèi)存耗用
- 資源加載速度優(yōu)化(壓縮大小，Gzip，CDN，延遲加載，按需加載等)
- 瀏覽器渲染優(yōu)化
2. 維護效率
- 代碼規(guī)范
- 文檔
- 組件化
- 分層、抽象、解耦
- 代碼版本管理
3. 測試效率
- 接口數(shù)據(jù) Mock
- 單元測試、功能測試、自動化測試
最后2條不成熟的小建議
- MDN 是個好東西，沒事多翻翻 傳送門 ??
- 多思考，多動手，不盲從（我說的，也不一定是對的?。?/li>
?? 原文地址
