概述
web應用從本質上說就是一種運行在瀏覽器上的軟件裳朋，而這些軟件的圖形化用戶界面即為web前端。現(xiàn)如今吓著，web應用更加的復雜鲤嫡，例如社交網絡送挑，購物平臺，金融信貸等暖眼。這樣的應用惕耕，動輒就是幾十上百人一起開發(fā)并維護的，其前端界面的規(guī)模也極為龐大诫肠。與此同時司澎，web應用面對的用戶對于前端界面的要求也越來越多。因此栋豫，從軟件工程化的角度去思考前端開發(fā)是大勢所趨挤安。
傳統(tǒng)方式的不足和待解決的問題
以前，前端資源是按照頁面或類似業(yè)務頁面集合的形式進行組織丧鸯。例如蛤铜，manage.js對應著管理界面的交互；user.css對應著用戶界面的樣式丛肢，這種方式在很長一段時間內廣泛使用围肥。
存在的不足：
- 前端頁面資源冗雜。頁面功能越來越多蜂怎，交互越來越復雜穆刻，前端代碼量增多。直接導致為了使用一個js中某個函數(shù)派敷，可能需要加載整個js文件蛹批，或者為了使用部分css樣式撰洗，需要加載其依賴的整個css篮愉，這樣無疑會增加請求，影響頁面性能差导。
- 資源維護困難试躏。js和css等資源是依賴于頁面或者相似頁面集合，它們之間的依賴關系也只能通過人來維護设褐，容易出錯颠蕴，常出現(xiàn)刪除某個頁面但其相關的資源還存在的情況。
- 不利于單元測試助析。以頁面為最小粒度進行資源整合犀被，不同功能的業(yè)務模塊相互影響，耦合度很高外冀，不利于進行自動化單元測試寡键。
工程化要解決的問題：
- 設計前端的架構
- 庫/框架的選型
- js/css模塊化開發(fā)
- 組件化開發(fā)
- 靜態(tài)資源智能化管理
前端工程化方案
前端架構
其中上有的React、Redux雪隧、ImmutableJs等框架為該架構的直接依賴西轩。下游為Business Components業(yè)務組件和Bussiness Modules業(yè)務模塊员舵，銜接上下游的，是基礎組件藕畔。
技術選型
| 場景 | 方案 |
|---|---|
| 開發(fā)語言 | ES6+Jsx(React) |
| 模塊化CSS | Sass/Less |
| RemoteData | FetchAPI |
| Routing(路由) | react-router |
| I18n | gettext方案 |
| 編譯打包 | Babel+webpack |
| Lint | Eslint |
| UT(單元測試) | Mocha+chai+Sinon+Enzyme |
| Demo Server | Nodejs |
JS/CSS模塊化開發(fā)
模塊化最核心的價值在于解決不同文件之間的分工和調用問題马僻，及依賴關系。
JS模塊化方案有ES6 Module注服、AMD韭邓、CommonJS等。
CSS模塊化方案有l(wèi)ess祠汇，Sass仍秤，stylus等預處理器。
組件化開發(fā)
- 頁面上的每一個獨立的可視/可交互的區(qū)域視為一個組件
- 每個組件對應一個工程目錄可很，組件所需的靜態(tài)資源就近維護诗力。
- 組件具有獨立性，組件之間自由組合我抠。
- 頁面是組件的容器苇本，負責組合形成完整的界面。
| 名稱 | 說明 | 舉例 |
|---|---|---|
| JS模塊 | 獨立的算法和數(shù)據單元 | 瀏覽器環(huán)境檢測(detect)菜拓，網絡請求(ajax)瓣窄，應用配置(config)，DOM操作(dom)纳鼎，工具函數(shù)(utils)俺夕，以及組件里的JS單元 |
| CSS模塊 | 獨立的樣式單元 | 柵格系統(tǒng)(grid)，字體圖標(icon-fonts)贱鄙，動畫樣式(animate)劝贸，以及組件里的CSS單元 |
| UI組件 | 獨立的可使/可交互單元 | 頁頭(header)，頁尾(footer)逗宁，導航欄(nav)映九，搜索框(search) |
| 頁面 | UI組件的容器 | 首頁(index)，列表頁(list)瞎颗，用戶管理(user) |
整個web應用由多個頁面組成：
每個頁面由多個組件組成：
綜上所述件甥，大致可以規(guī)劃處源碼目錄：
靜態(tài)資源管理
使用Webpack作為前端資源模塊化管理和打包工具。Webpack把項目當作一個整體哼拔，通過給定的主文件（如：index.js）引有，Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們倦逐，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件譬正。
Webpack插件非常多，功能強大，此處不細說导帝。
性能優(yōu)化
- CDN部署
- 緩存控制
- 文件指紋
- 緩存復用
- 請求合并
- 按需加載
- 同步/異步加載
- HTTP2.0服務端資源推送
- 移動端首屏CSS內嵌
- 延遲加載
- ... ...
