前端机能优化之gzip

2024年1月15日 210次阅读 来源: darkerXi

gzip是GNUzip的缩写，它是一个GNU自由软件的文件紧缩顺序。它最早由Jean-loup Gailly和Mark Adler建立，用于UNⅨ体系的文件紧缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP花样的。当今已经成为Internet 上运用异常广泛的一种数据紧缩花样，或许说一种文件花样。

HTTP协定上的GZIP编码是一种用来革新WEB应用顺序机能的手艺。大流量的WEB站点经常运用GZIP紧缩手艺来让用户感觉更快的速率。削减文件大小有两个显著的优点，一是能够削减存储空间，二是经由过程收集传输文件时，能够削减传输的时刻。

固然WEB效劳器和客户端（浏览器）必需配合支撑gzip。现在主流的浏览器Chrome,firefox,IE等都支撑该协定。罕见的效劳器如Apache，Nginx，IIS一样支撑gzip。

下面就以Vue项目为例，引见一下gzip的运用（vue-cli 2.*）

1、在/config/index.js中，修正设置开启gzip

// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'],

在修正productionGzip的默许值（false）为true之前，先装置所需的依靠npm install --save-dev compression-webpack-plugin。

假如按上述操纵完成后，打包时失足，发起替换低版本的compression-webpack-plugin，引荐运用1.1.12或许1.1.11版本等
npm uninstall --save-dev compression-webpack-plugin
npm install --save-dev compression-webpack-plugin@1.1.12

2、在nginx中开启gzip，/nginx/conf/nginx.conf中增加gzip设置

http:{ 
  #启用或禁用gzipping相应。#
  gzip on; 
  #设置用于紧缩相应的缓冲区number和size。默许情况下，缓冲区大小即是一个内存页面。这是4K或8K，细致取决于平台。#
  gzip_static on;
  #启用或禁用gzipping相应。#
  gzip_buffers 4 16k;
  #设置level相应的gzip紧缩。可接受的值局限为1到9。#
  gzip_comp_level 5;
  #设置将被gzip紧缩的相应的最小长度。长度仅由“Content-Length”相应头字段肯定。#
  gzip_min_length 100;
  #婚配MIME范例举行紧缩，text/html默许被紧缩。#
  gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}

修正完nginx设置，重启效劳。

关于gzip细致的设置和形貌，请查阅 Module ngx_http_gzip_module

至此，gzip已开启。你能够运转你的项目去检测一下。

翻开Chrome控制台，能够看到Network下的Response Headers中返回了Content-Encoding: gzip，表明gzip开启胜利。
而Request Headers内里的Accept-Encoding: gzip只是示意前端（用户浏览器）支撑gzip的紧缩体式格局。

效劳器支撑gzip的体式格局能够有两种：
1、打包的时刻天生对应的.gz文件，浏览器要求xx.js时，效劳器返回对应的xxx.js.gz文件
2、浏览器要求xx.js时，效劳器对xx.js举行gzip紧缩后传输给浏览器

    原文作者：darkerXi
    原文地址: https://segmentfault.com/a/1190000018142232
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞