美文网首页
vue--使用gzip压缩js和css

vue--使用gzip压缩js和css

作者: 手指乐 | 来源:发表于2019-10-23 11:06 被阅读0次
    • 后台有开关可以开启gzip,网页头的字段
    Content-Encoding: gzip
    

    标示网页是否经过了后台gzip压缩,如果有这个标志,浏览器就会执行解压操作

    • 后台返回js文件的时候,会判断是否开启gzip,然后压缩后再还给浏览器。但是nginx其实会先判断是否有.gz后缀的相同文件,有的话直接返回,nginx自己不再进行压缩处理。而压缩是要时间的!不同级别的压缩率花的时间也不一样。所以提前准备gz文件,可以更加优化,所以vue项目打包的时候如果就开启了gzip压缩,会降低服务器压力

    • 安装compression-webpack-plugin插件
      vue项目已经对compression-webpack-plugin做了配置,但是默认没有安装,所以必须先安装(最新版本会有各种报错,安装1.1.11正常)

    npm install --save-dev compression-webpack-plugin@1.1.11
    
    • config/index.js中修改下方代码
    productionGzip: true,//原来为false
    productionGzipExtensions: ['js', 'css'],
    
    • 执行npm run build后会同时生成gzip和对应的js/css,上传服务器,后台会根据情况(浏览器是否支持gzip)来给浏览器返回gzip或对应的js/css

    • 配置项:

    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' +
            config.build.productionGzipExtensions.join('|') +
            ')$'
          ),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    

    asset:生产的gzip资源名
    algorithm:压缩算法
    test:匹配的文件名会执行压缩
    threshold:大于多少的文件才执行压缩
    minRatio:压缩率

    相关文章

      网友评论

          本文标题:vue--使用gzip压缩js和css

          本文链接:https://www.haomeiwen.com/subject/evihvctx.html