不少人可能這樣認爲，前端工程化無非就是框架/庫、簡單的構建、css/js模塊化開發而已，其實這些只是前端工程話的一部分，當咱們開發一個大型的web應用的時候，將會面臨不少工程方面的問題，好比：多人如何協做開發、組件模塊如何複用、如何調試部署、版本如何管理控制、性能如何優化。所以，作好前端工程化，須要咱們作以下的幾件事：
1.開發規範
制定好開發、部署的目錄規範、編碼規範、好的目錄規範能讓項目解構清晰，便於維護和擴展；好的編碼規範能讓團隊人員的代碼風格統一，便於代碼的審查css
2.模塊化
針對JavaScript、CSS，以功能或者是業務爲單元組織代碼。JavaScript模塊化方案有不少，如：AMD/CommonJS/UMD/ES 6 module等，CSS模塊化基本都是在less、sass、stylus等預處理器的import/mixin特性的支持下完成的前端
3.組件化
將頁面拆分紅多個組件（component）。每一個組件依賴的CSS、JavaScript、模板、圖片等資源放在一塊兒開發和維護。組件是資源獨立的，組件在系統內部可複用，組件和組件之間能夠嵌套。如今比較流行的前端框架好比：React、Vue.js等都是提倡的是組件化開發方式。web
4.組件庫
有了組件庫，咱們還想將一些很是通用的組件或者JavaScript模塊放到一個公共的地方供團隊共享，方便新項目的複用，這就造成了組件庫，常見的組件庫bower、component等。後端
5.性能優化
經過工程化手段來解決性能優化問題。好比常見的請求合併、資源壓縮、CDN、甚至一些前沿的優化手段如bigpipe何bigender，都是經過工程化手段來保證的，面對業務開發者是透明的。前端工程化
6.項目部署
項目部署通常包括靜態資源緩存、CDN、增量發佈等問題。合理的靜態資源部署能夠爲前端性能帶來較大的優化空間，而增量發佈又爲項目的版本控制、A/B Test方案提供了保證。緩存
7.開發流程
完整的開發流程本地開發調試、視覺走查確認、先後端聯調、測試、上線等環節。sass
8.工程工具
工程工具包括構建與優化工具、開發–調試–部署等流程工具、組件的獲取和提交工具等。這些工具每每都是獨立的系統，若是分開來用，成本過高了。所以可否串聯這些功能，使得前端開發能夠持續集成，工具的設計就變得相當重要了。性能優化
