适用版本 vue2.6 【我当时的版本】

安装

npm i compression-webpack-plugin@5.0.1

使用

vue.config.jsconst CompressionWebpackPlugin = require('compression-webpack-plugin');module.exports = {
      // 开启gzip压缩
     config.plugin('CompressionWebpackPlugin').use(CompressionWebpackPlugin, [
        {
          filename: '[path][base].gz',
          algorithm: 'gzip',
          test: new RegExp('\.(js|css)$'),
          // 只处理大于xx字节 的文件，默认：0
          threshold: 10240,
          // 示例：一个1024b大小的文件，压缩后大小为768b，minRatio : 0.75
          minRatio: 0.8, // 默认: 0.8
          // 是否删除源文件，默认: false          deleteOriginalAssets: false
         }
     ])
}

注意

VUE打包时出现Cannot read property ‘tapPromise‘ of undefined问题
使用VUE webpack进行打包时出现了 ERROR TypeError:Cannot read property ‘tapPromise‘ of undefined问题,
检查后发现是compression-webpack-plugin版本问题，通过降低版本可以临时解决此类问题

compression-webpack-plugin 目前最新版是 8.0.0

运行命令：

①、先执行卸载命令：npm uninstall compression-webpack-plugin

②、执行安装命令：npm i compression-webpack-plugin@5.0.1

ng配置  服务器在线压缩

需要后端配合啦~~

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

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    # 开启gzip
    gzip  on;
    
    # 设置缓冲区大小
    gzip_buffers 4 16k;
    
    #压缩级别官网建议是6
    gzip_comp_level 6;
 
    #压缩的类型
    gzip_types  
    
                text/plain application/javascript                 
                application/x-javascript                 
                ext/javascript text/css application/xml;    server {
                listen       8462;
                server_name  localhost;

        location / {
            root   dist;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

响应头中会携带gzip压缩配置，每次请求xx.js文件，服务器都会进行实时压缩

优缺点

两种方案的优缺点：

1、webpack打包，然后直接使用静态的gz，   缺点就是打包后文件体积太大，但是不耗服务器性能；
2、使用nginx在线gzip，   缺点就是耗性能，需要实时压缩，但是vue打包后的文件体积小。

两种配置

`

1、有gz文件的时候进行静态压缩，

2、不存在gz文件的时候进行在线压缩而不是加载源文件，

gzip on;
gzip_static on;
gzip_comp_level 2;
gzip_types text/plain text/html text/css application/x-javascript text/xml 
            application/xml application/xml+rss text/javascript;  
首先，gzip_static的优先级高，会先加载静态gz文件，当同目录下不存在此文件的时候，会执行在线压缩的命令。

区分

响应头的Content-Edcoding:gzip 表示gzip 压缩已经生效，而Etag中只有简单字符表示静态资源加载，

而前面带 W/ 表示启动了在线压缩