前端工程——基礎篇

喂喂喂，那個切圖的，把頁麵寫好就發給研發工程師套模板吧。
你好，切圖仔。

選型之後基本上就可以開始敲碼了，不過光解決開發效率還不夠，必須要兼顧運行性能。前端工程進行到第二階段會選型一種構建工具，對代碼進行壓縮，校驗，之後再以頁麵為單位進行簡單的資源合並。
前端開發工程化程度之低，常常出乎我的意料，我之前在百度工作時是沒有多少概念的，直到離開大公司的溫室，去到業界與更多的團隊交流才發現，能做到這個階段在業界來說已然超出平均水平，屬於“具備較高工程化程度”的團隊了，查看網上形形色色的網頁源代碼，能做到最基本的JS/CSS壓縮的Web應用都已跨入標準互聯網公司行列，不難理解為什麼很多前端團隊對於前端工程構建的認知還僅停留在“壓縮、校驗、合並”這種程度。

很多人覺得模塊化開發的工程意義是複用，我不太認可這種看法，在我看來，模塊化開發的最大價值應該是分治，是分治，分治！（重說三）。
不管你將來是否要複用某段代碼，你都有充分的理由將其分治為一個模塊。

當我們要開發一款完整的Web應用時，前端將麵臨更多的工程問題，比如：
- 大體量：多功能、多頁麵、多狀態、多係統；
- 大規模：多人甚至多團隊合作開發；
- 高性能：CDN部署、緩存控製、文件指紋、緩存複用、請求合並、按需加載、同步/異步加載、移動端首屏CSS內嵌、HTTP 2.0服務端資源推送

這些無疑是一係列嚴肅的係統工程問題。

讀過《人月神話》的人應該都聽說過，軟件工程沒有銀彈。沒錯，前端開發同樣沒有銀彈，可是現在是連™鉛彈都沒有的年月！（剛有了BB彈，摔）
前端曆來以“簡單”著稱，在前端開發者群體中，小而美的價值觀占據著主要的話語權，甚至成為了某種信仰，想與其他人交流一下工程方麵的心得，得到的回應往往都是兩個字：太重。

這些經曆讓我明悟了一個道理：
進入第四階段，我們隻需做好兩件事就能大幅提升前端開發效率，並且兼顧運行性能，那就是——組件化開發與資源管理。

第一件事：組件化開發
分治的確是非常重要的工程優化手段。在我看來，前端作為一種GUI軟件，光有JS/CSS的模塊化還不夠，對於UI組件的分治也有著同樣迫切的需求：

如上圖，這是我所信仰的前端組件化開發理念，簡單解讀一下：
- 頁麵上的每個獨立的可視/可交互區域視為一個組件；
- 每個組件對應一個工程目錄，組件所需的各種資源都在這個目錄下就近維護；
- 由於組件具有獨立性，因此組件與組件之間可以自由組合；
- 頁麵隻不過是組件的容器，負責組合組件形成功能完整的界麵；
- 當不需要某個組件，或者想要替換組件時，可以整個目錄刪除/替換。

第二件事：“智能”靜態資源管理
上麵提到的模塊化/組件化開發，僅僅描述了一種開發理念，也可以認為是一種開發規範，倘若你認可這規範，對它的分治策略產生了共鳴，那我們就可以繼續聊聊它的具體實現了。

由“增量”原則引申出的前端優化技巧幾乎成為了性能優化的核心，有加載相關的按需加載、延遲加載、預加載、請求合並等策略；有緩存相關的瀏覽器緩存利用，緩存更新、緩存共享、非覆蓋式發布等方案；還有複雜的BigRender、BigPipe、Quickling、PageCache等技術。這些優化方案無不圍繞著如何將增量原則做到極致而展開。
所以我覺得：