#### JS壓縮的定義 1. 無效字符的刪除 2. 剔除注釋 3. 代碼語義的縮減和優化 4. 代碼保護(混淆) #### 如何進行JS壓縮和混淆 1. 使用在線網站進行壓縮(在線網站壓縮需要注意ES6-ES5的能力，以及合并文件后的依賴問題) 2. 使用html-minifier對html中的js進行壓縮 3. 使用uglifyjs對js進行壓縮 ### JS以及CSS文件合并存在的問題 1. 首屏渲染問題：當多個文件合并在一起，首屏渲染時間加長，現在流行的框架默認都會存在這個問題，文件中包含了框架代碼以及項目代碼 2. 緩存失效問題：當 a.js b.js c.js合并在一起后，任意一個 js 文件的變動都會導致合并的 js 文件緩存失效，瀏覽器需要重新請求整個文件 ### JS以及CSS代碼合并建議點 1. 公共庫代碼一般不會變動，可以打包在一起 2. 業務代碼進行分別打包 #### 如何進行文件合并 1. 使用在線網站進行文件合并 2. 使用node.js實現文件合并 ### 瀏覽器對同一域名下的靜態資源請求的限制 1. 示例A網站中有100個JS文件需要同時請求，但受限于瀏覽器的限制，實際上并不會達到并發請求100個文件的能力，每個瀏覽器的限制有所不同 2. 代碼合并減少請求也是有利于降低瀏覽器的請求數量限制 ***** ### 案例：文件未壓縮與未合并的請求 --- 文件壓縮并合并后的請求  *****