前端性能優化（一）-- 文件的壓縮與合並

首先我們需要搞清楚，我們為什么需要進行文件的壓縮與合並？壓縮與合並的原因主要有兩點

• 減少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戳