《十四》对打包后的 JavaScript 文件中的代码进行压缩和丑化

Terser 是一个可以对 JavaScript 代码进行解释、压缩和丑化的工具集。本身是一个独立的工具，可以单独使用，也可以结合 Webpack 等构建工具一起使用。

早期是使用 uglify-js 来压缩、丑化 JavaScript 代码的，但是目前已经不再维护了，并且不支持 ES6+ 的语法。

单独使用：

1. 安装 Terser，默认同时会安装对应的 CLII 工具：npm install terser。

2. 新建 src/index.js 文件，并编写代码。
   

3. 运行 terser ./src/index.js -o ./src/output.min.js 命令，会发现 Terser 生效生成了 src/index.min.js 文件，只是删掉了空格，其他都没有改变。

   -o ：输出的文件。

   

4. 运行 terser ./src/index.js -o ./src/output.min.js -c defaults 命令，会发现 Terser 生效生成了 src/index.min.js 文件，死代码也被删掉。

   -c：对代码进行压缩。有很多配置选项，具体可查看官方文档。

   

5. 运行 terser ./src/index.js -o ./src/output.min.js -m toplevel 命令，会发现 Terser 生效生成了 src/index.min.js 文件，函数名、参数名等被丑化了。

   -m：对名词进行转换和丑化。有很多配置选项，具体可查看官方文档。

   

在 Webpack 中使用：

在 Webpack 中是通过 TerserPlugin 插件来实现 Terser 功能的。Webpack5+ 默认就会安装 TerserPlugin 插件，之前的版本需要手动安装 TerserPlugin 插件。在 Webpack 配置文件中通过 optimization.minimizer 选项来配置 TerserPlugin 插件。

在 production 模式下，默认就会使用 TerserPlugin 插件来处理代码。

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    optimization: {
        // 需要将 minimize 设置为 true
        minimize: true,
        // 在 minimizer 中通过 TerserPlugin 实例配置 Terser
        minimizer: [
            new TerserPlugin({
                // 有很多配置选项，具体可查看官方文档
                terserOptions: {
                    toplevel: true,
                }
            })
        ]
    },
}