1.先下载

运行 npm install --save-dev compression-webpack-plugin

2.修改config/index.js

将productionGzip改成true
Vue gzip压缩以及版本不同引起的报错

3.查看或修改webpack.prod.conf.js的配置

可以使用默认配置,也可自行去1.x版本查看配置进行修改

Vue gzip压缩以及版本不同引起的报错

4.运行npm run build

如果dist里面有.gz文件即为压缩成功

5.版本问题

compression-webpack-plugin 存在使用版本不同引起的报错,如果使用的是版本1.x,建议使用上方图片的配置,如果使用的是版本2.x, 点击此链接去进行相关配置,或者使用下方的配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')
  module.exports = {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        test: /(\.js(\?.*)?)|(\.html(\?.*)?)|(\.css(\?.*)?)$/i,
        algorithm: 'gzip',
        cache:true,
        threshold: 10240,
        minRatio: 0.8,
      })
    ]
  }

相关文章:

  • 2022-12-23
  • 2021-09-04
  • 2022-12-23
  • 2021-07-31
  • 2022-01-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-07-19
  • 2022-12-23
  • 2021-12-29
  • 2022-12-23
  • 2022-12-23
  • 2021-11-13
相关资源
相似解决方案