⼀、webpack优化之Gzip（vue）
项⽬打包结束后，在终端上会展⽰三列（File、Size、Gzipped），Gzipped压缩后的⽂件⼤⼩显然⽐Size⼩，⽽我们打包后的⽂件都是没有压缩的，如果项⽬⽂件很⼤就会影响到⾸页⽩屏时间过长，因此研究了下Gzip。
⼀、Gzip压缩原理
1.1 原理
Gzip 压缩背后的原理，是在⼀个⽂本⽂件中出⼀些重复出现的字符串、临时替换它们，从⽽使整个⽂件变⼩。根据这个原理，⽂件中代码的重复率越⾼，那么压缩的效率就越⾼，使⽤ Gzip的收益也就越⼤。反之亦然。
1.1.1 HT T P压缩原理
HTTP 压缩是⼀种内置到⽹页服务器和⽹页客户端中以改进传输速度和带宽利⽤率的⽅式。在使⽤ HTTP 压缩的情况下，HTTP 数据在从服务器发送前就已压缩：兼容的浏览器将在下载所需的格式前宣告⽀持何种⽅法给服务器；不⽀持压缩⽅法的浏览器将下载未经压缩的数据。最常见的压缩⽅案包括 Gzip 和 Deflate。
1.1.2 we b p ack 的 G zip 和服务端的G zip
参考 webpack优化性能/⾸屏加载时间
⼀般来说，Gzip 压缩是服务器的活⼉：服务器了解到我们这边有⼀个 Gzip 压缩的需求，它会启动⾃⼰的 CPU 去为我们完成这个任务。⽽压缩⽂件这个过程本⾝是需要耗费时间的，⼤家可以理解为我们以服务器压缩的时间开销和 CPU 开销（以及浏览器解析压缩⽂件的开销）为代价，省下了⼀些传输过程中的时间开销。
既然存在着这样的交换，那么就要求我们学会权衡。服务器的 CPU 性能不是⽆限的，如果存在⼤量的压缩需求，服务器也扛不住的。服务器⼀旦因此慢下来了，⽤户还是要等。Webpack 中 Gzip 压缩操作的存在，事实上就是为了在构建过程中去做⼀部分服务器的⼯作，为服务器分压。
因此，这两个地⽅的 Gzip 压缩，谁也不能替代谁。它们必须和平共处，好好合作。作为开发者，我们也应该结合业务压⼒的实际强度情况，去做好这其中的权衡。
1.2 实现
不是每个浏览器都⽀持Gzip的，如何知道客户端是否⽀持Gzip呢，请求头中有个Accept-Encoding:gzip来标识对压缩的⽀持。客户端http请求头声明浏览器⽀持的压缩⽅式，服务端配置启⽤
压缩，压缩的⽂件类型，压缩⽅式。当客户端请求到服务端的时候，服务器解析请求头，如果客户端⽀持Gzip压缩，响应时对请求的资源进⾏压缩并返回给客户端，浏览器按照⾃⼰的⽅式解析，在http响应头，我们可以看到content-encoding:gzip，这是指服务端使⽤了Gzip的压缩⽅式（图1-1）。
gzip是什么文件夹
图1-1
1.3 如何看是否使⽤了Gzip压缩的⽂件
开发者⼯具 -> network -> content-encoding:gzip
图1-2

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。