前端性能优化之gzip压缩(压缩js、css、HTML，千万不能压缩图片！)

       gzip主要用来压缩html,css,javascript等静态文本文件，gzip 压缩的比率通常在3~10 倍之间，压缩后的体积能达到只有原本的30%左右，这样就能大大节省服务器的网络带宽和大大提升浏览器的浏览速度，如果项目够大，这个节省的时间就非常可观了！废话不多说上步骤：

1、安装插件

npm install compression-webpack-plugin -D

2、在vue.config.js文件里添加以下代码

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction= process.env.NODE_ENV === 'production'
module.exports = {
   //开启gzip
   configureWebpack: config => {
    if (isProduction) {
      // 配置webpack 压缩
      config.plugins.push(
        new CompressionWebpackPlugin({
          test: /\.js$|\.html$|\.css$/,
          // 超过4kb压缩
          threshold: 4096
        })
      )
    }
  }
}

3、打包，可以看到打包后dist里的js、css 文件里面多了.gz后缀的文件，部署到服务器之后，让后端工程师 配置开启gzip

补充：如果遇到打包报一下错误，是因为npm install compression-webpack-plugin -D 命令行安装的是最新版本，将版本降到 5.0.0 就不报错了（我自己是这样处理的，降版本后就可以正常打包）。

npm install [email protected] -D

4、现在就配置完了，去查验一下是否成功，打开浏览器 按F12，network 在表头鼠标右键，勾选response.headers里的Content-Encoding,就可以看到从服务器请求回来的资源是否是压缩的

5、对比下 开启gzip前后，可以明显看到js/css文件体积小了很多，加载时间也缩短了很多

 

注意：图片不建议采取gzip压缩，因为会图片本身就压缩过的，再采用 gzip只会适得其反，图片体积反增不减！

开启gzip压缩可以有效减缓带宽压力，但也会增加服务器计算量，如果带宽压力大而服务器配置hold的住，还是比较建议开启gzip的！

 

 

ps：简单记录，如有不恰当之处，欢迎指正！

 

//2021.01.28 补充打包报错，版本兼容问题处理