vue中webpack配置compression-webpack-plugin打包压缩和优化，terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化

一、compression-webpack-plugin介绍

参考地址：https://v4.webpack.js.org/plugins/compression-webpack-plugin/

一、compression-webpack-plugin的使用，安装插件

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

二、在 webpack 配置中,require 或 import 引入

const CompressionPlugin = require('compression-webpack-plugin');复制

三、配置

/*
*  filename: '[path][base].gz', // 输出压缩文件的名称
*  algorithm: 'gzip', // 使用的压缩算法，默认为 'gzip'
*  test: /\.(js|css|html)$/, // 匹配需要压缩的文件类型
*  threshold: 10240, // 只压缩大于该大小的文件，默认为 0
*   minRatio: 0.8 // 只有压缩率大于该值的文件才会被压缩，默认为 0.8
* deleteOriginalAssets   //删除源文件
*/
 //
module.exports = {
  plugins: [
    new CompressionPlugin(
		{
           	  algorithm: "gzip",
              test: /\.(js|css)$/, // 匹配文件名
              threshold: 10240, // 对超过10k的数据压缩
              deleteOriginalAssets: false, // 不删除源文件
              minRatio: 0.8, // 压缩比
          }
	)
  ]
}复制

一、terser-webpack-plugin介绍

参考地址：https://v4.webpack.js.org/plugins/terser-webpack-plugin/

一、安装terser-webpack-plugin

npm install terser-webpack-plugin --save-dev复制

二、在 Webpack 配置中引入

const TerserPlugin = require('terser-webpack-plugin');复制

三、配置

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        // 插件的选项配置
          extractComments: false, // 是否提取注释，默认为 true
		  terserOptions: {
		    compress: {
		      drop_console: true, // 去除 console.log 语句
		    },
		    output: {
		      comments: false, // 是否保留注释，默认为 true
		    },
		  },
      })
    ]
  }
}复制