首页 前端知识 vue中webpack配置compression-webpack-plugin打包压缩和优化,terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化

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

2024-05-10 22:05:30 前端知识 前端哥 578 344 我要收藏

一、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
		    },
		  },
      })
    ]
  }
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7981.html
标签
webpack
评论
发布的文章

HTML5(H5)中的Web Workers

2024-05-19 09:05:52

HTML5

2024-02-27 11:02:15

HTML5 <option> 标签

2024-05-19 09:05:51

@JsonProperty 注解详解

2024-05-19 09:05:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!