前端性能优化之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

前端性能优化之gzip压缩(压缩js、css、HTML,千万不能压缩图片!)_第1张图片

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

前端性能优化之gzip压缩(压缩js、css、HTML,千万不能压缩图片!)_第2张图片

npm install [email protected] -D

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

前端性能优化之gzip压缩(压缩js、css、HTML,千万不能压缩图片!)_第3张图片

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

前端性能优化之gzip压缩(压缩js、css、HTML,千万不能压缩图片!)_第4张图片

 

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

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

 

 

ps:简单记录,如有不恰当之处,欢迎指正!

 

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

 

 

你可能感兴趣的:(前端性能优化,gzip,性能优化)