lbp的blog

纸上得来终觉浅，绝知此事要躬行

0%

web性能优化-gzip

发表于 分类于

主要介绍

  • 如何配置 vue-cli4 gzip 压缩
  • nginx 支持 gzip

对包进行压缩的好处很明显，减少体积。包体积带来的好处

  • 节省宽带

  • 减少传输时间

    可以选择两种 时间点 来压缩包：

  1. 前端 build 时压缩
  2. 服务端（nginx,tomcat等容器）进行压缩

服务端压缩 会消耗资源，个人没有看出有什么好处。所以 推荐第一种， 由客户端来进行压缩。

vue-cli4 配置 gzip

配置， 需要引入插件 compression-webpack-plugin.

在 vue.config.js 中配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
configureWebpack: config => {
    const plugins = [];
    plugins.push(
      new CompressionWebpackPlugin({
        algorithm: "gzip",
        test: productionGzipExtensions,
        threshold: 10240,
        minRatio: 0.8
      })
    );
    config.plugins = [...config.plugins, ...plugins];
  },

配置项具体含义含义可以参考 compression-webpack-plugin

配置完成后，打包输出的文件。会同时存在 **.js 和 **.js.gz

如果 浏览器 支持 gzip, 也就是 请求头包含 Accept-Encoding: gzip, deflate 。 相当于向服务端请求 压缩后的文件，由服务端来返回的响应。

nginx 支持 gzip 请求

nginx 的 ngx_http_gzip_module

模块可以在存在压缩资源，并且浏览器支持此格式（Accept-Encoding）压缩资源，返回压缩后的资源。

配置如下：

1
2
3
4
5
6
7
8
9
server {
    listen       80;
    server_name wuhan.aioc.jdcloud.com;

    location /tyjrgl {
        gzip_static on;
        gzip_http_version 1.0;
    }
}

gzip_http_version 配置的原因是， 代理服务器Nginx，转发是 1.0

效果如下：
压缩前

压缩后

ngx_http_gzip_module 模块不是 默认添加的，需要手动添加到 nginx 中。

添加 ngx_http_gzip_module 的一些注意事项

可以使用 nginx -V | grep ngx_http_gzip_module 检查现有 nginx 包含哪些模块

需要下载与现有 nginx 版本对应的代码， 进行编译。下载地址：nginx-download

在编译包需要把 nginx -V 所包含的 配置一并添加

记得使用 cp 命令备份原 nginx

参考 yum安装下的nginx，如何添加模块，和添加第三方模块

我配置了，但是不起作用

放平心态， 一定是自己某一个环节疏忽了，一点点排查。

  • 首先确保是否把 压缩后的资源 上传了

  • nginx -s reload ?

  • 检查配置是否真正生效？

可以在配置之后做一些简单的配置，比如： access_log 从日志文件，来判断 ngx_http_gzip_module 是否真正配置
可能因为各种莫名奇妙的原因， ngx_http_gzip_module 模块并没有配置成功

  • 直接在资源服务器请求 curl -H "Accept-Encoding: gzip" -I http://wuhan.aioc.jdcloud.com/tyjrgl/js/app.58d8e1b9.js
    如果包含 Content-Encoding: gzip 或者 从 Content-Length 来判断，是否配置成功。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    [root@pre-nginx ~]# curl -H"Accept-Encoding: gzip" http://wuhan.aioc.jdcloud.com/tyjrgl/js/app.58d8e1b9.js -I
    HTTP/1.1 200 OK
    Server: nginx/1.16.1
    Date: Fri, 13 Nov 2020 11:28:36 GMT
    Content-Type: application/javascript
    Content-Length: 3663
    Last-Modified: Fri, 13 Nov 2020 10:24:28 GMT
    Connection: keep-alive
    ETag: "5fae5edc-e4f"
    Content-Encoding: gzip
    Expires: Fri, 13 Nov 2020 12:08:36 GMT
    Cache-Control: max-age=2400
  • 配置是否全面？

比如： 如果前端部署服务器，是从某个ng代理转发来的，需要配置
gzip_http_version： 1.0

  • 以上都没有问题， 我配置了，但没有生效 。
    请评论 欢迎一起 探讨。