概述
web應(yīng)用從本質(zhì)上說就是一種運行在瀏覽器上的軟件，而這些軟件的圖形化用戶界面即為web前端。現(xiàn)如今，web應(yīng)用更加的復(fù)雜，例如社交網(wǎng)絡(luò)，購物平臺，金融信貸等。這樣的應(yīng)用，動輒就是幾十上百人一起開發(fā)并維護的，其前端界面的規(guī)模也極為龐大。與此同時，web應(yīng)用面對的用戶對于前端界面的要求也越來越多。因此，從軟件工程化的角度去思考前端開發(fā)是大勢所趨。
傳統(tǒng)方式的不足和待解決的問題
以前，前端資源是按照頁面或類似業(yè)務(wù)頁面集合的形式進行組織。例如，manage.js對應(yīng)著管理界面的交互；user.css對應(yīng)著用戶界面的樣式，這種方式在很長一段時間內(nèi)廣泛使用。
存在的不足：
- 前端頁面資源冗雜。頁面功能越來越多，交互越來越復(fù)雜，前端代碼量增多。直接導(dǎo)致為了使用一個js中某個函數(shù)，可能需要加載整個js文件，或者為了使用部分css樣式，需要加載其依賴的整個css，這樣無疑會增加請求，影響頁面性能。
- 資源維護困難。js和css等資源是依賴于頁面或者相似頁面集合，它們之間的依賴關(guān)系也只能通過人來維護，容易出錯，常出現(xiàn)刪除某個頁面但其相關(guān)的資源還存在的情況。
- 不利于單元測試。以頁面為最小粒度進行資源整合，不同功能的業(yè)務(wù)模塊相互影響，耦合度很高，不利于進行自動化單元測試。
工程化要解決的問題：
- 設(shè)計前端的架構(gòu)
- 庫/框架的選型
- js/css模塊化開發(fā)
- 組件化開發(fā)
- 靜態(tài)資源智能化管理
前端工程化方案
前端架構(gòu)
其中上有的React、Redux、ImmutableJs等框架為該架構(gòu)的直接依賴。下游為Business Components業(yè)務(wù)組件和Bussiness Modules業(yè)務(wù)模塊，銜接上下游的，是基礎(chǔ)組件。
技術(shù)選型
| 場景 | 方案 |
|---|---|
| 開發(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ā)
模塊化最核心的價值在于解決不同文件之間的分工和調(diào)用問題，及依賴關(guān)系。
JS模塊化方案有ES6 Module、AMD、CommonJS等。
CSS模塊化方案有l(wèi)ess，Sass，stylus等預(yù)處理器。
組件化開發(fā)
- 頁面上的每一個獨立的可視/可交互的區(qū)域視為一個組件
- 每個組件對應(yīng)一個工程目錄，組件所需的靜態(tài)資源就近維護。
- 組件具有獨立性，組件之間自由組合。
- 頁面是組件的容器，負責(zé)組合形成完整的界面。
| 名稱 | 說明 | 舉例 |
|---|---|---|
| JS模塊 | 獨立的算法和數(shù)據(jù)單元 | 瀏覽器環(huán)境檢測(detect)，網(wǎng)絡(luò)請求(ajax)，應(yīng)用配置(config)，DOM操作(dom)，工具函數(shù)(utils)，以及組件里的JS單元 |
| CSS模塊 | 獨立的樣式單元 | 柵格系統(tǒng)(grid)，字體圖標(biāo)(icon-fonts)，動畫樣式(animate)，以及組件里的CSS單元 |
| UI組件 | 獨立的可使/可交互單元 | 頁頭(header)，頁尾(footer)，導(dǎo)航欄(nav)，搜索框(search) |
| 頁面 | UI組件的容器 | 首頁(index)，列表頁(list)，用戶管理(user) |
整個web應(yīng)用由多個頁面組成：
每個頁面由多個組件組成：
綜上所述，大致可以規(guī)劃處源碼目錄：
靜態(tài)資源管理
使用Webpack作為前端資源模塊化管理和打包工具。Webpack把項目當(dāng)作一個整體，通過給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。
Webpack插件非常多，功能強大，此處不細說。
性能優(yōu)化
- CDN部署
- 緩存控制
- 文件指紋
- 緩存復(fù)用
- 請求合并
- 按需加載
- 同步/異步加載
- HTTP2.0服務(wù)端資源推送
- 移動端首屏CSS內(nèi)嵌
- 延遲加載
- ... ...
