首先我們需要搞清楚，我們為什麼需要進行檔案的壓縮與合併？壓縮與合併的原因主要有兩點

• 減少HTTP請求數
• 減小HTTP的請求大小
  這裡的主要優化方式有3點：
• HTML/CSS/JS檔案的壓縮
• CSS/JS檔案的合併
• 開啟GZIP壓縮

如何進行HTML壓縮

1. 使用線上網站壓縮
2. html-minifier工具
3. 後端模板引擎渲染時壓縮

如何進行CSS壓縮

1. 使用線上網站壓縮
2. 對於html中的css可以使用html-minifier壓縮
3. clean-css工具

為什麼要進行js壓縮與混亂

1. 無效的字元刪除
2. 刪除註釋
3. 程式碼語義的縮減和優化
4. 程式碼保護

如何進行js的壓縮

1. 使用線上網站進行壓縮
2. 對於html中的css可以使用html-minifier壓縮
3. uglifyjs2工具

如何進行js的合併

1. 手動進行合併
2. 使用webpack，gulp等工具

檔案合併帶來的優勢

1. 假設我們未合併之前，有N個JS檔案，檔案的合併我們可以減少N-1上行的HTTP請求
2. 減輕了丟包問題的影響
3. 減少了經過代理伺服器時斷開的可能

檔案合併存在的問題

1. 由於檔案全部被合併到一個js檔案中，那麼首屏渲染時就需要將完整的js檔案下載下來，然後才能渲染首屏，這樣增加了首屏渲染的時間
2. 由於檔案合併時，檔案的md5戳會發生變化，從而導致快取失效的問題

如何有效的規避檔案合併帶來的問題

1. 可以將專案的第三方依賴打到一個common chunks中，這樣不會每次打包都會改變這個檔案的md5戳