vue项目使用GZIP（SPA应用优化）

• 服务器启用GZIP

  • 

  • http {
        include       /etc/nginx/mime.types;
        default_type  application/octet-stream;
    
        log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                          '$status $body_bytes_sent "$http_referer" '
                          '"$http_user_agent" "$http_x_forwarded_for"';
    
        access_log  /var/log/nginx/access.log  main;
    
        sendfile        on;
        #tcp_nopush     on;
    
        keepalive_timeout  65;
    
        #gzip  on;
    
         gzip on;
        #设置压缩最小单位，小于不压缩
         gzip_min_length 10k;
         gzip_disable "msie6";
         gzip_vary on;
         gzip_proxied any;
         gzip_comp_level 6;
         gzip_buffers 4 16k;
         gzip_http_version 1.1;
         gzip_types text/plain text/css application/json application/javascript     text/xml application/xml application/xml+rss text/javascript;
         include /etc/nginx/conf.d/*.conf;
    }
    

    优点：无需任何前端项目配置，浏览器请求xx.js文件时，服务器对xx.js文件进行gzip压缩后传输给浏览器

    缺点：浪费cpu资源  “w/ 为服务器在线压缩标识”

• 前端打包启用Gzip配置

  • webpack打包
  • 安装依赖包

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

     

vue.config.js的配置

const CompressionPlugin = require('compression-webpack-plugin')

chainWebpack(config) {
    // 打包压缩
   config.plugin('CompressionPlugin').use(
      new CompressionPlugin({
        algorithm: 'gzip', // 使用gzip压缩
        test: /\.js$|\.html$|\.css$/, // 匹配文件名
        filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
        minRatio: 1, // 压缩率小于1才会压缩
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
      })
    ) 
  }

nginx开启 支持 

 # 开启gzip静态访问客户端解析 优先级高
     gzip_static on;

 

 

最佳方案  前端 设置 deleteOriginalAssets: false  开启不删除原js文件

同事开启前端打包，后端在线压缩

gzip_static的优先级高，会先加载静态gz文件，当同目录下不存在此文件的时候，会执行在线压缩的命令。

这样的话不管前端是否打包Gzip 后端都能返回客户端压缩的文件 ，注意：在线压缩关键会消耗CPU

nginx完美配置

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
    # 开启gzip静态访问客户端解析 优先级高
     gzip_static on;

     gzip on;
    #设置压缩最小单位，小于不压缩
     gzip_min_length 10k;
     gzip_disable "msie6";
     gzip_vary on;
     gzip_proxied any;
     gzip_comp_level 6;
     gzip_buffers 4 16k;
     gzip_http_version 1.1;
     gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
     include /etc/nginx/conf.d/*.conf;
}