前端性能优化（一）-- 文件的压缩与合并

首先我们需要搞清楚，我们为什么需要进行文件的压缩与合并？压缩与合并的原因主要有两点

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