关键词：

背景

如果你是个前端开发人员，你肯定知道线上环境要把js，css，图片等压缩，尽量减少文件的大小，提升响应速度，特别是对移动端，这个非常重要。

压缩

压缩方式

前端压缩的方式很多，依赖java的有ant工具，前端自己打包压缩的有grunt，gulp，webpack，这些压缩也很重要，基本上能压缩50%以上，下面我们对压缩文件来个对比，如图所示，这是未压缩的

这是压缩后的

高能预警！！！gzip能在压缩的基础上再进行压缩50%以上！！！

gzip压缩原理

但是不是每个浏览器都支持gzip的，如果知道客户端是否支持gzip呢，请求头中有个Accept-Encoding来标识对压缩的支持。客户端http请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。当客户端请求到服务端的时候，服务器解析请求头，如果客户端支持gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照自己的方式解析，在http响应头，我们可以看到content-encoding:gzip，这是指服务端使用了gzip的压缩方式。

那么怎么看有没有用gzip压缩的文件呢，打开f12，查看network，按照下面的方式过滤

content-encoding是gzip的话就说明返回的是gzip

还有一点 gzip不压缩图片，因为压缩之后会更大- -，所以一般到是压缩css和js

如何启用gzip

前面说过了，启用gzip需要客户端和服务端的支持，如果客户端支持gzip的解析，那么只要服务端能够返回gzip的文件就可以启用gzip了，现在来说一下几种不同的环境下的服务端如何配置

node端

node端很简单，只要加上compress模块即可，代码如下

var compression = require(‘compression‘)
var app = express();

//尽量在其他中间件前使用compression
app.use(compression());

这是基本用法，如果还要对请求进行过滤的话，还要加上

app.use(compression(filter: shouldCompress))

function shouldCompress (req, res) 
  if (req.headers[‘x-no-compression‘]) 
    // 这里就过滤掉了请求头包含‘x-no-compression‘
    return false
  

  return compression.filter(req, res)

更多用法请移步compression文档
如果用的是koa，用法和上面的差不多

const compress = require(‘koa-compress‘);
const app = module.exports = new Koa();
app.use(compress());

因为node读取的是生成目录中的文件，所以要先用webpack等其他工具进行压缩成gzip，webpack的配置如下

const CompressionWebpackPlugin = require(‘compression-webpack-plugin‘);
plugins.push(
    new CompressionWebpackPlugin(
        asset: ‘[path].gz[query]‘,// 目标文件名
        algorithm: ‘gzip‘,// 使用gzip压缩
        test: new RegExp(
            ‘\\\\.(js|css)$‘ // 压缩 js 与 css
        ),
        threshold: 10240,// 资源文件大于10240B=10kB时会被压缩
        minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩
    )
);

plugins是webpack的插件

tomcat

tomcat的配置如下

找到tomcat的server.xml文件，找到其中Connector节点然后进行配置修改，具体配置如下

<Connectorport="80"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0" useBodyEncodingForURI="true"compression="on" compressionMinSize="2048"noCompressionUserAgents="gozilla, traviata"compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>

参数说明：

• compression="on" 打开压缩功能
• compressionMinSize="2048" 启用压缩的输出内容大小，当被压缩对象的大小>=该值时才会被压缩，这里面默认为2KB
• noCompressionUserAgents="gozilla, traviata" 对于以下的浏览器，不启用压缩
• compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 压缩类型

注意：tomcat7以后，js文件的mimetype类型变为了application/javascript，而在tomcat7以下则为text/javascript;具体的tomcat7定义的类型可以在：conf/web.xml文件中找到。

可以在web.xml下搜索，如我搜索javascript会找到如下代码

<mime-mapping>
    <extension>js</extension>
    <mime-type>application/javascript</mime-type>
</mime-mapping>

切记上面的类型不能配置错了，如果配置错了压缩是不会起作用的。

nginx

gzip使用环境:http,server,location,if(x),一般把它定义在nginx.conf的http…..之间

• gzip on
  on为启用，off为关闭
• gzip_min_length 1k
  设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。
• gzip_buffers 4 16k
  获取多少内存用于缓存压缩结果，‘4 16k’表示以16k*4为单位获得
• gzip_comp_level 5
  gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值;
• gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php
  对特定的MIME类型生效,其中‘text/html’被系统强制启用
• gzip_http_version 1.1
  识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
• gzip_vary on
  启用应答头"Vary: Accept-Encoding"
• gzip_proxied off
  nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)
• gzip_disable msie6
  (IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库

以上代码可以插入到 http ...整个服务器的配置里，也可以插入到虚拟主机的 server ...或者下面的location模块内

转自

https://segmentfault.com/a/1190000012571492

网站性能优化实战之——gzip（webpack,vite开启gzip部署）(代码片段)

这些天个人博客网站终于写好了，使用的技术是react17+vite+redux+saga+ts等，后台使用的是node+koa+mysql+ts，前台地址是：http://blogs.chenliangliang.top/前端代码地址：https://github.com/ 查看详情

前端页面加载速度优化---ngnix之gzip压缩(代码片段)

gzipon;#开启Gzipgzip_staticon;#是否开启gzip静态资源#nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。该模块启用后，nginx首先检查是否存在请求静态文件的gz结尾的... 查看详情

前端性能优化之请求优化(代码片段)

...长，兼容处理不够全面等很容易造成用户流失。作为一名前端开发，优化用户体验是一件永无止境的事情，没有最优，只有更优。前端性能优化方向有很多，今天主要讲解在网络请求上的优化。因涉及的优化方向较多，对于具体... 查看详情

前端性能优化策略(代码片段)

一、网络加载类1、减少HTTP资源请求次数　　合并静态资源图片、JavaScript或CSS代码，减少页面请求数和资源请求消耗　　避免重复的资源，防止增加多余请求2、减小HTTP请求大小　　减少没必要的图片、JavaScript、CSS及HTML代码　... 查看详情

前端性能优化之gzip

参考技术A由于我们团队的前端项目越来越庞大，加之Vue的SPA首屏加载特性，导致系统第一次加载速度越来越缓慢，可能达到几十秒的程度，所以为了优化用户性能体验，我们选择了开启Gzip进行文件压缩，确实达到了显著的效果... 查看详情

前端性能优化之重排和重绘(代码片段)

前言，最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》，今天写的文章从“老生常谈”的页面重绘和重排入手，去探究这两个概念在页面性能提升上的作用。 一.重排&重绘有经验的大佬对这个概... 查看详情

前端性能优化之重排和重绘(代码片段)

前言，最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》，今天写的文章从“老生常谈”的页面重绘和重排入手，去探究这两个概念在页面性能提升上的作用。一.重排&重绘有经验的大佬对这个概念一定不... 查看详情

前端性能优化之----静态文件客户端离线缓存_20191110(代码片段)

前端性能优化之----静态文件客户端离线缓存1.前言上次的文章给大家分享了怎么在webpack打包阶段去将自己的项目优化到极致。文章链接：将webpack打包优化到极致_201806192.探究业务的瓶颈H5页面的性能瓶颈，网络因素几乎... 查看详情

前端性能优化之重排和重绘(代码片段)

...《从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！》切回正题，我们继续探讨何为重排。浏览器下载完页面所有的资源后，就要开始构建DOM树，与此同时还 查看详情

前端项目性能优化记录~(代码片段)

前端性能优化总结原因：最近公司一个项目即将上线,作为它的主要构建者之一(亲爸爸)一直在思考如何能给它更好的性能优化于是博主开始了网上大量的学习,集百家之所长,试图把这些骚操作应用在自己的项目中,完事之后记... 查看详情

前端性能优化-gzip

为什么要开启GZIP我们需要下载一个100KB的Javascript文件，正常的下载量就是100KB，如果我们把文件在服务端压缩一下，压缩成30kb，下载到客户端再进行解压，这样就减少了大量的HTTP的传输时间，这就是GZIP的作用。如何开启服务器... 查看详情

每天一道前端面试题：如何进行网站性能优化(代码片段)

content方面减少HTTP请求：合并文件、CSS精灵、inlineImage减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名减少DOM元素数量Server方面使用CDN配置ETag对组件使用Gzip压缩Cookie方面减小cookie大小css方面将样式表放到页面顶部不使用CSS... 查看详情

nginx：17---反向代理之（反向代理服务器的性能调优：缓冲数据缓存数据存储数据压缩数据(gzip模块)）(代码片段)

一、缓冲数据二、缓存数据三、存储数据四、压缩数据(gzip模块、gzip_static模块)Nginx中提供了gzip模块，可以提升网站的速度，优化带宽可以帮助减少相应的传输时间gzip模块在Nginx编译时默认被启用，因此我们可以直接... 查看详情

前端性能优化之优化图片

　　前端图片优化一直以来都是热门话题，从需求上来看，很多站点往往是图片体积大于代码体积，图片请求多余代码文件请求，给前端的性能带来了很大的困扰，那么应该如何解决呢？  零、认识图片　　我们通常使用... 查看详情

前端性能优化

前端性能优化 一、代码部署： 　　　　1、代码的压缩与合并 　　　　2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。 　　　　3、使用内容分发网络CDN 　... 查看详情

nginx-性能优化配置(代码片段)

文章目录性能优化配置1.高效文件传输模式2.gzip2.1gzip_types总结性能优化配置1.高效文件传输模式[!NOTE]参数sendfileon用于开启文件高效传输模式，同时将tcp_nopushon和tcp_nodelayon两个指令设置为on，可防止网络及磁盘I/O阻塞，... 查看详情

nginx-性能优化配置(代码片段)

文章目录性能优化配置1.高效文件传输模式2.gzip2.1gzip_types总结性能优化配置1.高效文件传输模式[!NOTE]参数sendfileon用于开启文件高效传输模式，同时将tcp_nopushon和tcp_nodelayon两个指令设置为on，可防止网络及磁盘I/O阻塞，... 查看详情

前端性能优化–资源预加载

导语  　　当提到前端性能优化时，我们首先会联想到文件的合并、压缩，文件缓存和开启服务器端的gzip压缩等，这使得页面加载更快，用户可以尽快使用我们的Web应用来达到他们的目标。　　资源预加载是另一个性能&n... 查看详情