轉載自：http://www.cnblogs.com/lanlanlan00/p/7155663.html

寫在前面：引用別人的，在我看來說得比較淺顯易懂的。

現在的前端開發倒也並非一無所有，回顧一下曾經經歷過或聽聞過的專案，為了提升其前端開發效率和執行效能，前端團隊的工程建設大致會經歷三個階段：

第一階段：庫/框架選型

前端工程建設的第一項任務就是根據專案特徵進行技術選型。

基本上現在沒有人完全從0開始做網站，哪怕是政府專案用個jquery都很正常吧，React/Angularjs等框架橫空出世，解放了不少生產力，合理的技術選型可以為專案節省許多工程量這點毋庸置疑。

第二階段：簡單構建優化

選型之後基本上就可以開始敲碼了，不過光解決開發效率還不夠，必須要兼顧執行效能。前端工程進行到第二階段會選型一種構建工具，對程式碼進行壓縮，校驗，之後再以頁面為單位進行簡單的資源合併。

前端開發工程化程度之低，常常出乎我的意料，我之前在百度工作時是沒有多少概念的，直到離開大公司的溫室，去到業界與更多的團隊交流才發現，能做到這個階段在業界來說已然超出平均水平，屬於“具備較高工程化程度”的團隊了，檢視網上形形色色的網頁原始碼，能做到最基本的JS/CSS壓縮的Web應用都已跨入標準網際網路公司行列，不難理解為什麼很多前端團隊對於前端工程構建的認知還僅停留在“壓縮、校驗、合併”這種程度。

第三階段：JS/CSS模組化開發

分而治之是軟體工程中的重要思想，是複雜系統開發和維護的基石，這點放在前端開發中同樣適用。在解決了基本開發效率執行效率問題之後，前端團隊開始思考維護效率，模組化是目前前端最流行的分治手段。

很多人覺得模組化開發的工程意義是複用，我不太認可這種看法，在我看來，模組化開發的最大價值應該是分治，是分治，分治！（重說三）。

不管你將來是否要複用某段程式碼，你都有充分的理由將其分治為一個模組。

JS模組化方案很多，AMD/CommonJS/UMD/ES6 Module等，對應的框架和工具也一大堆，說起來很煩，大家自行百度吧；CSS模組化開發基本都是在less、sass、stylus等前處理器的import/mixin特性支援下實現的。

雖然這些技術由來已久，在如今這個“言必及React”的時代略顯落伍，但想想業界的絕大多數團隊的工程化落後程度，放眼望去，毫不誇張的說，能達到第三階段的前端團隊已屬於高階行列，基本具備了開發維護一般規模Web應用的能力。

然而，做到這些就夠了麼？Naive！