前端性能优化——html、css、js压缩

如果你未使用vue、react等主流前端框架，可选择忽略。因为前端资源在打包时，已经默认对js、css等文件进行了压缩。

我们知道，在浏览器渲染前端页面时，要首先获取我们的前端资源：html、css、js等。获取此类资源会需要消耗网络流量，那我们此次优化就来减小网络流量的消耗。

压缩参考工具：在线压缩站点  离线压缩工具下载

一、案例 ：压缩html

1、压缩前：

   test.html文件压缩之前 901B，在服务端开启gzip压缩的情况下，test.html.gz 文件的大小为440B

2、压缩后：

test.html文件压缩之后792B，在服务端开启gzip压缩的情况下，test.html.gz 文件的大小为398B

压缩效果很明显。

二、此次压缩做了哪些事情？

1、html压缩

删除无用的字符，空格、换行符、制表符等；

删除多余的html注释

2、js、css压缩

删除无效的字符、代码、注释

代码语义的缩减和优化（如定义的变量字符很长，则会缩短变量的字符长度）

代码保护 （压缩后，不易读懂）

css语义合并