Terser-webpack-plugin详解

发布时间：2023-05-20

一、安装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项目。

推荐文章