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

對于前端工程化我自己還沒形成知識體系，先簡單羅列知識點，如果哪一天突然開竅就把這些用自己的思路和理解貫穿起來

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

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

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

1、hash：

簡單說，hash是項目級的hash

hash是由compilation對象計算所得

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

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

2、chunkhash

簡單說，chunkhash是文件級的hash

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

也就是說某個文件的改動只會影響它本身的hash指紋，不會影響其他文件

3、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值

?

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

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

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

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

?

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

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

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

1、html+css無編譯

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

2、本地緩存：200->304

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

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

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

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

　　　　問題：一個文件變更，所有緩存失效

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

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

6、靜態資源CDN部署

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

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

?

整體策略：

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

采用內容摘要作為緩存更新依據 —— 精確的緩存控制

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

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

?

注意：

　　靜態資源的緩存控制要求在前端所有靜態資源加載的位置都要做這樣的處理

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

　　由于涉及到摘要信息，引用資源的摘要信息也會引起引用文件本身的內容改變，從而形成級聯的摘要變化

　　大概示意圖如下

?

四、前端工程--基礎篇

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

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

1、前三階段

第一階段：庫/框架選型

技術選型，減少工程量

第二階段：簡單構建優化

在開發階段后，為提高運行性能（運行效率）而做：壓縮、校驗、資源合并...

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

分而治之，提高維護效率

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

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

　　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 資源管理

未完待續...

?

轉載于:https://www.cnblogs.com/zs-note/p/8781115.html

總結

以上是生活随笔為你收集整理的前端工程化系列好文摘要的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。