vue-cli2添加compression-webpack-plugin压缩代码

1、安装compression-webpack-plugin开发依赖插件

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

2、将productionGzip配置为true

productionGzip: true,
productionGzipExtensions: ['js', 'css'],

3、引入并配置compression-webpack-plugin插件

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]', //新版本无该属性,用filename代替
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

4、 npm run build命令打包报错如下:

在这里插入图片描述

原因:项目中webpack版本与compression-webpack-plugin依赖的webpack版本不匹配,且最新版本中无asset属性

Requirements:This module requires a minimum of Node v6.9.0 and Webpack v4.0.0 (此模块最低需要 Node v6.9.0和Webpack v4.0.0)

解决方案:

1. 卸载已经安装的compression-webpack-plugin

npm uninstall --save-dev compression-webpack-plugin

2. 重新安装1.1.12版本

 npm install --save-dev compression-webpack-plugin@1.1.12

线上使用需后台同步配置
具体可以参考:https://www.cnblogs.com/donghuang/p/10045688.html
官方文档:https://github.com/webpack-contrib/compression-webpack-plugin

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值