#### 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. 代码合并减少请求也是有利于降低浏览器的请求数量限制 ***** ### 案例：文件未压缩与未合并的请求 --- 文件压缩并合并后的请求  *****