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

首先咱們須要搞清楚，咱們爲何須要進行文件的壓縮與合併？壓縮與合併的緣由主要有兩點

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