vue项目打包gzip压缩

gzip是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多，需要nginx也启用gzip

vue-cli2.x中启用gzip

安装低版本才不会报错

// 安装低版本
npm install --save-dev compression-webpack-plugin@1.1.2

配置位置
config\index.js

image.png

image.png

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      // deleteOriginalAssets:true, //删除源文件，不建议
      minRatio: 0.8
    })
  )

vue-cli3.x

安装低版本

npm i --save-dev compression-webpack-plugin@5.0.1

对vue.config.js进行配置
// 打包 使用gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin');

// 定义压缩文件类型

const productionGzipExtensions = ['js', 'css'];

module.exports = {
  ...
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名

        threshold: 10240, // 对超过10K的数据进行压缩

        minRatio: 0.8, // 极小比
      }),
    ]
  },
}

运行npm run build后出现gz结尾的文件就成功了

image.png