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

这篇具有很好参考价值的文章主要介绍了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/文章来源地址https://www.toymoban.com/news/detail-850682.html

一、安装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
		    },
		  },
      })
    ]
  }
}

到了这里，关于vue中webpack配置compression-webpack-plugin打包压缩和优化，terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！