前端工程化系列好文摘要

前端工程化遇到的好文在這裏簡要摘記一下核心要點和主要概念，這裏核心是指針對本人而言不表明原文核心闡述，方便快速查閱，詳細解釋仍是要看原文

對於前端工程化我本身還沒造成知識體系，先簡單羅列知識點，若是哪一天忽然開竅就把這些用本身的思路和理解貫穿起來

1、Webpack中hash與chunkhash的區別，以及js與css的hash指紋解耦方案

原文連接：http://www.cnblogs.com/ihardcoder/p/5623411.html

要點：介紹Webpack的hash指紋相關內容，核心要點在hash、chunkhash、contenthash三者之間的區別

一、hash：

簡單說，hash是項目級的hash

hash是由compilation對象計算所得

compilation對象表明某個版本的資源對應的編譯進程。每次檢測到項目文件有改動就會建立一個compilation

也就是說項目中任何文件修改都會引發compilation對象的變化，從而使hash值改變

二、chunkhash

簡單說，chunkhash是文件級的hash

chunkhash是根據具體模塊文件的內容計算所得的hash值

也就是說某個文件的改動只會影響它自己的hash指紋，不會影響其餘文件

三、contenthash

簡單說，contenthash的做用在於使js與css指紋hash計算解耦

webpack默認將js/style文件通通編譯到一個js文件中，這樣就使得chunkhash配置編譯的結果是js和css文件的hash指紋徹底相同。不管是單獨修改了js代碼仍是style代碼，編譯輸出的js/css文件都會打上全新的相同的hash指紋。這種情況下咱們不能將css單獨編譯輸出而且打上hash指紋，也就沒法有效的進行版本管理和部署上線。

可是，能夠藉助extract-text-webpack-plugin將style文件單獨編譯輸出，extract-text-webpack-plugin提供了contenthash。contenthash表明的是文本文件內容的hash值，也就是隻有style文件的hash值

 

2、組件化、模塊化相關文章

Web應用的組件化開發：http://blog.jobbole.com/56161/

前端組件化開發實踐：http://web.jobbole.com/82689/

大規模的前端組件化與模塊化：http://www.infoq.com/cn/news/2014/04/front-end-modular

 

3、大公司裏怎樣開發和部署前端代碼？

原文連接：https://github.com/fouber/blog/issues/6

要點：大公司變態級前端性能優化演進

一、html+css無編譯

　　問題：css每次都要請求，狀態碼200

二、本地緩存：200->304

　　　　問題：304協商緩存，還會與服務端通訊一次

三、強制本地緩存（cache-control/expires），不通訊

　　　　問題：資源變動緩存如何更新

四、修改引用資源路徑：路徑+版本

　　　　問題：一個文件變動，全部緩存失效

五、使用數據摘要算法，版本精確到文件級

　　　　問題：靜態資源與動態網頁分集羣部署

六、靜態資源CDN部署

　　　　問題：更新時，先部署網頁，仍是靜態資源？

七、用文件的摘要信息來對資源文件進行重命名，使用新文件非覆蓋式發佈，先部署靜態資源再灰度部署頁面

 

總體策略：

1. 配置超長時間的本地緩存 —— 節省帶寬，提升性能

2. 採用內容摘要做爲緩存更新依據 —— 精確的緩存控制

3. 靜態資源CDN部署 —— 優化網絡請求

4. 更資源發佈路徑實現非覆蓋式發佈 —— 平滑升級

 

注意：

　　靜態資源的緩存控制要求在前端全部靜態資源加載的位置都要作這樣的處理

　　包括js、css文件以及其中引用的資源路徑

　　因爲涉及到摘要信息，引用資源的摘要信息也會引發引用文件自己的內容改變，從而造成級聯的摘要變化

　　大概示意圖以下

 

4、前端工程--基礎篇

 原文連接：https://github.com/fouber/blog/issues/10

要點：前端工程建設的四個階段

一、前三階段

第一階段：庫/框架選型

技術選型，減小工程量

第二階段：簡單構建優化

在開發階段後，爲提升運行性能（運行效率）而作：壓縮、校驗、資源合併...

第三階段：js/css模塊化開發

分而治之，提升維護效率

二、第四階段：組件化開發與資源管理

　　大幅提高開發效率，兼顧運行性能

　　2.1 組件化

組件化核心：

• 獨立的可視/可交互區域
• 組件須要的資源就近在同一個項目目錄下
• 組件之間相互獨立（不耦合），可隨意組合
• 頁面只是組件的容器
• 不須要或替換組件時，能夠整個目錄刪除/替換

組件化好處

• 功能被分治，開發者之間沒有時序的依賴，提高並行開發效率
• 容許隨時加入新成員認領組件開發或維護工做
• 支持多個團隊共同協做

前端項目開發概念劃分

名稱	說明	舉例
JS模塊	獨立的算法和數據單元	瀏覽器環境檢測(detect)，網絡請求(ajax)，應用配置(config)，DOM操做(dom)，工具函數(utils)，以及組件裏的JS單元
CSS模塊	獨立的功能性樣式單元	柵格系統(grid)，字體圖標(icon-fonts)，動畫樣式(animate)，以及組件裏的CSS單元
UI組件	獨立的可視/可交互功能單元	頁頭(header)，頁尾(footer)，導航欄(nav)，搜索框(search)
頁面	前端這種GUI軟件的界面狀態，是UI組件的容器	首頁(index)，列表頁(list)，用戶管理(user)
應用	整個項目或整個站點被稱之爲應用，由多個頁面組成

 

前端項目結構（可知道指導項目目錄結構）

• web應用由頁面組成

• 頁面由組件構成

 

• 一個組件由一個目錄，資源就近管理

• 組件可組合
• 組件的JS可依賴其餘JS模塊
• CSS可依賴其餘CSS單元

 

2.2 資源管理

未完待續...