npm 包 `terser` 使用教程

在前端开发中，代码压缩是一个常见的优化手段，可以减小文件体积，提高网页加载速度。在 Node.js 环境下，我们可以使用 terser 这个 npm 包来进行 JavaScript 代码的压缩。

安装

在使用 terser 之前，需要先安装它。使用以下命令即可：

npm install terser --save-dev

这会将 terser 安装为项目的开发依赖。安装完成后，我们就可以使用它了。

压缩代码

使用 terser 压缩代码非常简单。以下是一个示例代码：

const code = 'function add(a, b) { return a + b; }';
const result = terser.minify(code);
console.log(result.code);

上述代码定义了一个字符串变量 code，其中包含一段用于求和的函数。然后调用 terser.minify 方法对这段代码进行压缩，并将结果输出到控制台。

如果一切正常，你应该可以看到类似下面这样的输出：

function add(n,d){return n+d}

这是经过 terser 压缩后的代码。可以看到，函数的参数名被更改了，同时代码也被压缩成了一行。

配置选项

除了默认的压缩选项外，terser 还提供了一些配置选项，可以让我们更精细地控制压缩的过程。以下是一些常用的选项：

• compress: 压缩代码时使用的选项。
• mangle: 重命名变量和函数名时使用的选项。
• output: 输出格式相关的选项。

例如，如果我们想要在压缩代码时禁用变量名称混淆，可以使用以下代码：

const code = 'function add(a, b) { return a + b; }';
const result = terser.minify(code, {
  mangle: false,
});
console.log(result.code);

这里把 mangle 设置为 false，即禁用变量名混淆。输出结果如下：

function add(a,b){return a+b}

可以看到，函数参数名没有被更改。

指南

在使用 terser 进行代码压缩时，需要注意以下几点：

1. 尽可能将多个 JavaScript 文件合并成一个文件再进行压缩。这样可以避免因为文件数量过多而导致加载速度变慢的问题。
2. 压缩代码前，先对代码进行优化。可以使用一些工具来去除冗余代码、提高代码质量等。例如 ESLint、Prettier 等。
3. 压缩代码后，需要进行测试以确保代码没有出现问题。因为压缩过程可能会导致代码出现 bug 或无法正常运行。

总结

terser 是一个非常强大的 JavaScript 代码压缩工具，可以帮助我们在前端开发中提高网页加载速度。在使用它时需要注意一些细节，并对代码进行测试以确保其质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40744