gzip压缩

打包的时候开启gzip可以很大程度减少包的大小，非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验。
1.安装
插件地址https://www.npmjs.com/package/compression-webpack-plugin
npm install compression-webpack-plugin --save-dev
yarn add compression-webpack-plugin --save-dev

2.vue.config.js配置

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

module.exports = {
  
  productionSourceMap: false,
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        'jQuery': 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery'
      }),

      new CompressionPlugin({
          test: /\.(js|css|json|html|svg|png|jpg|woff|ttf|woff2)?$/i, // 哪些文件要压缩
          filename: '[path].gz[query]',　// 压缩后的文件名
          algorithm: 'gzip',　// 使用gzip压缩
          minRatio: 1,// 压缩率小于1才会压缩
          deleteOriginalAssets: false // 删除未压缩的文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false
         })

    ]
  }
}

3.nginx.conf中开启gzip压缩

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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_static on;
    gzip_types text/xml text/plain text/css application/javascript application/x-javascript 
    application/rss+xml image/jpeg image/jpg image/png font/opentype font/x-woff image/svg+xml font/ttf;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_vary off;
    gzip_disable "MSIE [1-6].";
    

    include /etc/nginx/conf.d/*.conf;
}

3.打包后的文件

将原文件和gz文件一起部署在服务器
（gzip_static on）Nginx的动态压缩是对每个请求先压缩再输出，这样造成虚拟机浪费了很多cpu，解决这个问题可以利用nginx模块Gzip Precompression，这个模块的作用是对于需要压缩的文件，直接读取已经压缩好的文件(文件名为加.gz)，而不是动态压缩，对于不支持gzip的请求则读取原文件。

1.文件可以使用 gzip 命令来进行压缩，或任何其他兼容的命令。

2.gzip_static配置优先级高于gzip。

3.开启nginx_static后，对于任何文件都会先查找是否有对应的gz文件。
　　直接读取已经压缩好的文件(文件名为加.gz)，而不是动态压缩，对于不支持gzip的请求则读取原文件。

4.gzip_types设置对gzip_static无效。

5.gzip static默认适用HTTP 1.1。