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

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

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

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

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

     npm install --save-dev [email protected]

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 // 不删除源文件
	      }))
	  }
   } 
   

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