1. 靜態資源的壓縮與合併

我們在開發的時候會習慣縮排和寫註釋，方便我們在日常的維護，但將程式碼上傳至服務端後，我們完全可以把那些空格、製表符、換行符進行壓縮，以此減少請求資源的大小；同樣的，我們在服務端所引用的第三方庫進行合併，能減少 HTTP 的請求數量

• 將 HTML 檔案裡的空格、製表符、換行符進行壓縮，並剔除所有註釋
• 將 CSS 檔案裡的空格、製表符、換行符進行壓縮，無效程式碼刪除，CSS 語義合併
• 將 JS 檔案壓縮與混亂，無效字元的刪除，剔除註釋，程式碼語義的縮減和優化（變數名過長，使用其他字元進行代替），程式碼保護

程式碼壓縮可以使用 開源中國_線上工具 進行壓縮，不過這種方式面對需要大量壓縮的程式碼會顯得效率低下，推薦大家使用 html-minifier 外掛進行壓縮，CSS 還可以使用 clean-css 進行壓縮，JS 可以使用 uglifyjs2 進行壓縮

在 CSS 或 JS 檔案中引用第三方外掛，即表明我們在引用第三方資源時需要請求大量的檔案，在 keep-alive 模式下，檔案與檔案直接會插入上行請求，增加網路延遲，受到丟包影響會更嚴重，經過代理伺服器時也可能會斷開

在將檔案進行合併前，有兩個地方需要大家注意下，① 將公共庫和業務庫分開合併，這樣的好處是，我們迭代版本的時候，只需要更新業務庫即可，在 Vue, React 框架中也是作同樣處理；② 若是在 Vue 或 React 專案中，還建議大家將不同頁面所需要的 JS 進行合併，只有當路由到該頁面的時候，才請求該頁面所需要的元件

合併之後的檔案要佔據更多容量，所請求時間更久，若是首屏渲染依賴 JS，則會出現首次加載出現白屏的情況，這種場景一般存在於Vue，React框架使用過程中，在沒有使用服務端渲染的情況下，是將整個過程通過框架進行接管的

我們在標記 JS 檔案是否被更改時，通常會在該 JS 檔案後加一個 MD5 戳，用來唯一標識該 JS 檔案是否被更改，若是合併前的任一個檔案有改動，那麼合併後的整個檔案快取都會失效

檔案合併的方式同樣可通過線上網站或 NodeJS 進行合併，在此不再複述

2. 圖片優化

我們一般所用到的圖片格式為 jpg, png, webp, svg，而不同的圖片格式所對應的業務場景也不相同，jpg 格式圖片為有失真壓縮，壓縮率高，不支援透明，適用大部分不需要透明圖片的業務場景；png 格式圖片支援透明，瀏覽器相容好，其中 png8 為 256 色，支援透明，png24 為 2^24 色，不支援透明，png32 為 2^24 色，支援透明；webp 格式圖片壓縮程度好，在 iOS webview 中有相容性問題，推薦在 Android 中使用該格式圖片；svg 格式圖片，將圖片內容內嵌到 HTML 中，通過使用 iconfont

webp 為谷歌開發的圖片格式，其優勢體現在它具有更優的影象資料壓縮演算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的影象質量；同時具備了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 jpeg 和 png 上的轉化效果都非常優秀、穩定和統一

雪碧圖 CSS sprite 就是講網站上用到的一些 icon 整合到一張單獨圖片中，通過 background-position 屬性來顯示相對應的圖片，使用雪碧圖的優點為，減少你的網站 HTTP 請求數量，相對而言，載入比較慢

同樣推薦幾個圖片優化的線上網站， 圖片壓縮 TinyPNG，PNG 轉換 Webp ，CSS Sprite 製作

End of File

行文過程中出現錯誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導更多人，最後，如果你覺得我的文章寫的還不錯，希望能夠點一下喜歡和關注，為了我能早日成為簡書優秀作者獻上一發助攻吧，謝謝！^ ^