您的位置:

Terser-webpack-plugin详解

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