一、安装Terser-webpack-plugin
在使用Terser-webpack-plugin之前,需要先安装。根据项目所使用的包管理工具,运行以下命令:
npm install terser-webpack-plugin -- save-dev
或者使用yarn:
yarn add terser-webpack-plugin --dev
二、为什么需要Terser-webpack-plugin
构建项目时,你需要优化项目中的js文件。Terser-webpack-plugin是Webpack的内置插件UglifyJS的替代方案。它提供了更好的默认参数以及更小的bundle大小。因此,使用Terser-webpack-plugin可以帮助我们更好的优化Webpack项目。
三、如何使用Terser-webpack-plugin
我们需要在Webpack.config.js文件中添加如下代码来使用Terser-webpack-plugin。
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserPlugin()],
},
};
以上代码将Terser-webpack-plugin添加到了Webpack的minimizer数组中。当运行webpack打包命令时,Terser-webpack-plugin会自动压缩代码。
四、Terser-webpack-plugin常用选项
1、parallel
定义TerserPlugin使用的worker数量。worker用于并行运行Terser。该选项的默认值是 os.cpus().length - 1。
new TerserPlugin({
parallel: true,
}),
2、terserOptions
定义Terser的配置选项。常用选项有:
- compress: 定义压缩行为的配置对象
- mangle: 定义混淆选项的配置对象
- output: 定义输出选项的配置对象
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
},
output: {
comments: false,
},
},
}),
3、extractComments
将注释提取到单独的文件中。默认值为 false,设置为 true 可以将注释提取到与打包文件同名的 .LICENSE 文件中。
new TerserPlugin({
extractComments: true,
}),
4、test/include/exclude
test 和 include/exclude 选项用于细粒度地控制哪些文件要压缩。其中,test 是一个匹配文件的正则表达式。include 和 exclude 是一组匹配加载器或者文件的条件数组。
new TerserPlugin({
test: /\.js(\?.*)?$/i,
exclude: /node_modules/,
terserOptions: {
compress: {
unused: true,
dead_code: true,
},
},
}),
五、总结
本文对Terser-webpack-plugin进行了详细介绍,包括安装、使用以及参数等。希望本文能够帮助大家更好的优化Webpack项目。