Vue cli3 打包时开启gzip文件压缩_vue3 使用gz压缩之后打包之后的文件没有gz文件

Vue cli3 打包时开启gzip文件压缩

1. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件：

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

2. 如果出现tapPromise undefined 的错误时，可在后面加上版本号，降低版本

     npm install --save-dev compression-webpack-plugin@5.0.0
1

3. .在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置：

   const CompressionPlugin = require("compression-webpack-plugin") 
   module.exports = {
	   chainWebpack(config){
	      config.plugin('compressionPlugin')
	      .use(new CompressionPlugin({
	        algorithm: 'gzip',
	        test:/\.js$|\.html$|.\css/, // 匹配文件名
	        threshold: 10240, // 对超过10k的数据压缩
	        minRatio: 0.8,
	        deleteOriginalAssets: false // 不删除源文件
	      }))
	  }
   } 
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4. 打包后的文件夹中会出现后缀为gz的文件，如图：