My-Notes

Search

SearchSearch

002.Terser

Apr 06, 2024, 4 min read

介绍

Terser 是一个流行的 JavaScript 解析器和压缩器，它可以帮助你优化 JavaScript 代码以减少其大小，从而提高 Web 页面的加载速度。Terser 是 Uglify-es 的替代品，后者已经停止维护。Terser 支持 ES6 和更高版本的 JavaScript。

Terser 的一些主要功能：

  • 删除无用的代码：Terser 可以自动删除代码中的无用代码（也称 “dead code”），如未被调用的函数和未被使用的变量。
  • 压缩和混淆代码：Terser 可以将代码压缩尽可能小。可以移除空格和注释，将变量和函数名重命名为短的名称，以及使用其他的压缩技术。这也有助于混淆代码，使得它更难被人类理解，从而提高代码的安全性。
  • 保留注释：虽然 Terser 默认会移除所有的注释，但可以配置它保留某些注释，例如包含特定关键词的注释。
  • 源码映射支持：Terser 支持生成源码映射（source map），这可以帮助在压缩后的代码中进行调试。
  • 支持 ES6 及更高版本：Terser 支持最新版本的 ECMAScript。

API

创建一个项目 terser-demo，使用 pnpm init 初始化后安装相应依赖：

pnpm add terser -D

接下来在 src/index.js 文件里写入一些要压缩的代码，之后在 src 下创建 compress.js，打算利用 Terser 的 API 对文件进行压缩。

compress.js 的代码如下：

// 对 src/index.js 进行压缩
 
const { minify } = require("terser");
const path = require("path");
const fs = require("fs");
 
// 定义输入和输出文件的路径
const codePath = path.resolve("src", "index.js");
const outDir = "dist";
const outPath = path.resolve(outDir, "index.js");
const outSourcemapPath = path.resolve(outDir, "index.js.map");
 
// 读取源码文件
const code = {
  "index.js": fs.readFileSync(codePath, "utf8"),
};
 
// 压缩对应的配置项
const options = {
  sourceMap: {
    filename: "index.js",
    url: "index.js.map",
  },
};
 
// 准备工作完成后，接下来就调用 API 进行压缩
minify(code, options)
  .then((result) => {
    // 将压缩后的内容写入到规定的位置
    if (!fs.existsSync(outDir)) {
      fs.mkdirSync(outDir, { recursive: true });
    }
 
    fs.writeFileSync(outPath, result.code);
 
    // 生成 sourcemap
    if (result.map) {
      fs.writeFileSync(outSourcemapPath, result.map);
    }
 
    console.log("压缩工作已完成...");
  })
  .catch((err) => {
    console.log("压缩工作失败，错误信息如下：");
    console.error(err);
  });

在上面的代码中，用到了 Terser 的 minify 方法来对代码进行压缩。关于 Terser 具体的 API，可以参阅 官网

CLI

CLI 背后调用的就是 API，在 官网 可以看到该工具所支持的 CLI

基本的格式如下：

terser [input files] [options]
  • input files：要压缩的文件
  • options：压缩配置项

如：

terser ./src/index.js -o ./dist/index.js --source-map -o ./dist/index.js

配置文件

Terser 没有支持单独的配置文件，但是要注意不支持单独的配置文件不代表不支持配置，作为一个工具，肯定是支持配置的。

可以在 官网 看到该工具所有的配置项。

Graph View

Backlinks