Vue项目开启gzip压缩

安装插件（compression-webpack-plugin）：

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

在vue.config.js里增加 打包构建生成gz文件，删除源文件

const CompressionWebpackPlugin = require('compression-webpack-plugin');
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
                algorithm: 'gzip', // 使用gzip压缩
                test: /\.(js|css|json|ico|svg)(\?.*)?$/i, // 匹配文件名
                filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
                minRatio: 0.8, // 压缩率小于1才会压缩
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: true, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
            }),
        ]
      }
    }
  },

配置Nginx

http {

    include       mime.types;

    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;


    gzip on;

    gzip_static on;

    gzip_buffers 32 4K;

    gzip_comp_level 6;

    gzip_min_length 10k;

    gzip_types application/javascript text/css text/xml;

    gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）

    gzip_vary on;


    server {

        listen       80;

        server_name  localhost;

        location / {

            root   html;

            index  index.html index.htm;

            try_files $uri $uri/ /index.html;

        }


        location ~* \.(jpg|jpeg|png|gif|css|js|swf|mp3|avi|flv|xml|zip|rar)$ {
          root   html;
           gzip_static on;

       }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        }

    }

}