利用 Nginx 的 Gzip 模块解决 Vue 首屏加载缓慢的问题

通过 Nginx 的 Gize 模块拦截请求，并且对相应的资源进行压缩，已达到减少文件体积加快文件访问速度的目的，使用 Nginx 的 Gizp 模块不需要重新编译，直接开启即可。

基本配置

在 server 中加入如下代码

# 开启gzip
gzip  on;
# 低于1kb的资源不压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小
gzip_buffers 4 16k;
# 压缩级别【1-9】，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。
gzip_comp_level 6;
# 需要压缩哪些响应类型的资源，缺少的类型自己补。
gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
# 配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6]\.";
# 是否添加“Vary: Accept-Encoding”响应头，
gzip_vary on;
# 设置gzip压缩针对的HTTP协议版本，没做负载的可以不用
# gzip_http_version 1.0;

查看效果

在 response headers 中的 Content-Encoding 是 gzip 就代表开启成功

前后对比

未开启 Gzip 的文件大小与加载速度

开启 Gzip 后的文件大小与加载速度

前后速度提升明显

完整配置

附上完整的 Nginx https + Gzip 配置

server {
       listen 443 ssl http2;
       server_name el-admin.xin www.el-admin.xin;

       # 证书配置
        ssl_certificate  /etc/nginx/cert/el-admin-xin/el-admin.xin_chain.crt;    
       ssl_certificate_key  /etc/nginx/cert/el-admin-xin/el-admin.xin_key.key;

        # DHE密码器的Diffie-Hellman参数，需要openssl手动生成
        # openssl命令：openssl dhparam -dsaparam -out /home/nginx/cert/el-admin-vip/dhparam.pem 4096
        ssl_dhparam /etc/nginx/cert/el-admin-xin/dhparam.pem;

        # 开启OCSP Stapling，由服务器验证证书在线状态，提高TLS握手效率
        ssl_stapling on;
        ssl_stapling_verify on;

        # 开启HSTS，缓存http重定向到https，以防止中间人攻击
        add_header Strict-Transport-Security "max-age=63072000;" always;

        # 开启TLS False Start
        ssl_prefer_server_ciphers on;
    
        # 中等兼容程度，Mozilla推荐配置
        ssl_ciphers  ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    
        # 中等兼容程度，Mozilla推荐配置
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    
        # 由客户端保存加密后的session信息
        ssl_session_tickets on;
    
        # 缓存SSL
        ssl_session_cache shared:SSL:10m;
        ssl_session_timeout 1d;
    
        # 长链接
        keepalive_timeout  70;
    
        #减少点击劫持，禁止在iframe中加载
        add_header X-Frame-Options DENY;

       # 开启gzip    
        gzip  on;
        # 低于1kb的资源不压缩
       gzip_min_length 1k;
       # 设置压缩所需要的缓冲区大小
       gzip_buffers 4 16k;
       # 压缩级别【1-9】，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。
       gzip_comp_level 4;
       # 需要压缩哪些响应类型的资源，缺少自己补。
       gzip_types text/css text/javascript application/javascript;
       # 配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
       gzip_disable "MSIE [1-6]\.";
       # 是否添加“Vary: Accept-Encoding”响应头，
       gzip_vary on;
        
        # 根目录
        location / {
          root   /usr/share/nginx/html/eladmin/dist;
          index  index.html;
          try_files $uri $uri/ @router;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }
    
       location @router {
          rewrite ^.*$ /index.html last;
       }
}

server {
       listen       80;
       server_name  el-admin.xin;
       return 301 https://el-admin.xin$request_uri;
}