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