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

首先咱们须要搞清楚，咱们为何须要进行文件的压缩与合并？压缩与合并的缘由主要有两点

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