Terser-webpack-plugin详解

小蓝 • 2024-12-12 12:44 • 编程

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

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/241836.html