Vue使用 compression-webpack-plugin 开启Gzip压缩

1.Gzip可以对那些文件压缩

gzip 可以压缩所有的文件，但是我们不需要对所有文件进行压缩，一般情况对我们写的代码（css,js，html）之类的文件有很好的压缩效果，图片之类文件不会被 gzip 压缩太多，因为它们已经内置了一些压缩，再去压缩可能会让生成的文件体积更大一些。

2、如何生成gzip文件

• 利用 compression-webpack-plugin 插件 开启Gzip压缩
• 安装命令行执行 ： cnpm i compression-webpack-plugin@6.1.1 --save

 

const CompressionPlugin = require('compression-webpack-plugin'); //引入gzip压缩插件

configureWebpack: { //webback基本打包配置
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [

      // if (process.env.NODE_ENV !== 'production') return
      new CompressionPlugin({
        filename: '[path].gz[query]',   //  使得多个.gz文件合并成一个文件，这种方式压缩后的文件少
        algorithm: 'gzip',     // 默认压缩是gzip
        test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体（.ttf和.woff和.eot）做压缩
        threshold: 10240,      //以字节为单位压缩超过此大小的文件，使用默认值10240
        minRatio: 0.8,          // 最小压缩比率，官方默认0.8
        //是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。
        deleteOriginalAssets: false
      })
    ],

然后在 运行打包命令 npm run build

文件加内出现.gz文件就代表打包成功

 

Nginx 服务端开启gizp压缩

http
    {

		
        gzip on;    // 开启gzip
        gzip_min_length  1k;  //不压缩临界值，大于1K的才压缩，一般不用改
        gzip_buffers     4 16k;  //设置缓冲区大小
        gzip_http_version 1.1;
        gzip_comp_level 2; //压缩级别官网建议是6 ，1-10，数字越大压缩的越好，时间也越长
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;  //压缩的类型
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";  //IE6对Gzip不开启

 }

 

如果Nginx已经做了gzip，那么Vue还需要做吗？

•         当把一个包含.gz的静态资源放到nginx上，有web请求过来时，nginx如果开启了gzip，那么它会检测你的静态资源文件夹里面有没有.gz文件，如果有的话，nginx会直接返回gz文件，如果没有，nginx会动态的压缩成gz返回到浏览器。

 

•         如果Nginx已经做了gzip，我们前端是可以不做gzip压缩的 ，但是如果做好压缩的话放到服务器上
•         可以对为 服务器省下实时压缩成gz文件的计算资源  所以推荐还是前端做好gzip然后放到服务器上

 

4.可以用工具 gzip压缩_gzip检测 pagespeed.webkaka.com

或者sss.sanbao.fun/#/dashboard网页GZIP压缩检测结果

来检测服务端是否开启 gizp压缩