使用gzip,提升访问页面速度

简单说一下对gzip的理解:

  • 客户端访问资源时,服务端先对资源进行压缩,再返回
  • 客户端自动解压,无需另行处理

第一点要注意的是,客户端每次访问资源时,服务端都会对资源进行压缩,每次压缩都会占用一定的系统资源(CPU、内存),因此,这里需要对压缩后的资源进行缓存处理。

因为前端使用了webpack打包工具,在构建过程中,使用compression-webpack-plugin插件即可对文件进行压缩,服务端直接使用压缩后的文件。

 

npm install --save-dev compression-webpack-plugin

在webpack添加如下配置:

 

const CompressionWebpackPlugin = require('compression-webpack-plugin')
//...
plugins:[
  new CompressionWebpackPlugin({ //这里对大于10k的js和css文件进行压缩,其它配置参考官方文档
      test: /\.(js|css)$/,
      threshold: 10240
  })
]
//...

修改配置文件后,构建一下npm run build
即可看到部分体积较大的js和css文件,会产生.gz格式的压缩文件。

随后还需要对部署前端代码的服务器进行配置,这里以nginx为例,打开nginx.conf文件,添加如下配置
需要注意的是,这里需要有两种不同的情况:

  1. 直接使用压缩后的文件

 

# 第一种情况
http {
    # ...其它配置
    # 开启gzip
    gzip on;
    gzip_static on;
    # ...其它配置
}
  1. 不使用webpack打包后的.gz文件,客户端访问资源时再压缩

 

# 第二种情况
http {
    # ...其它配置
    gzip  on;
    gzip_static on;
    gzip_min_length 10k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 8;
    # 根据需要添加文件类型
    gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";
    # ...其它配置
}

启动服务器,按下F12打开开发者工具,打开network,在列表的表头右击鼠标,修改:responses Headers 下的Content-Encoding,访问页面即可看到列表中部分js和css文件Content-Encoding那一列下的值为gzip,在http response header中也可看到Accept-Encoding: gzip。

需要注意的是,若使用了代理服务器,在代理服务器中也要添加相关的gzip配置。但是,如果代理服务器使用了gzip,部署前端代码的nginx就不要使用gzip了,因为这样会导致二次压缩

让我们访问页面的速度飞一会儿~

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值