npm 包 babel-plugin-uglify-siuying 使用教程

前言

babel-plugin-uglify-siuying 是一款基于 Babel 的 JavaScript 代码压缩插件，它能够通过移除无用代码、优化变量名等方式来减小代码体积，提升网页性能。本文将介绍如何使用该插件。

安装

在使用前，需要先安装 babel 和 babel-plugin-uglify-siuying：

npm install babel babel-plugin-uglify-siuying --save-dev

配置

使用 babel-plugin-uglify-siuying 需要在 .babelrc 中配置该插件。在该文件中添加以下内容：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["babel-plugin-uglify-siuying"]
}

使用

配置好后，就可以使用 babel-cli 运行 babel，通过该插件压缩 JavaScript 代码了。使用以下命令运行：

babel index.js --out-file index.min.js

这个命令会将 index.js 转换后的代码输出到 index.min.js 中。

优化

babel-plugin-uglify-siuying 也提供了一些优化选项，可以通过配置 .babelrc 中的 options 进行设置，以下是可选的选项。

removeConsole

可以移除所有 console 语句：

{
  "presets": ["@babel/preset-env"],
  "plugins": [["babel-plugin-uglify-siuying", {
    "removeConsole": true
  }]]
}

设置该选项后，以下函数调用：

console.log('hello world');

将不会被压缩插件识别，从而被移除。

removeDebugger

可以移除所有 debugger 语句：

{
  "presets": ["@babel/preset-env"],
  "plugins": [["babel-plugin-uglify-siuying", {
    "removeDebugger": true
  }]]
}

设置该选项后，以下代码：

debugger;

将不会被压缩插件识别，从而被移除。

removeUnusedVars

可以移除未使用的变量：

{
  "presets": ["@babel/preset-env"],
  "plugins": [["babel-plugin-uglify-siuying", {
    "removeUnusedVars": true
  }]]
}

设置该选项后，以下代码：

const a = 1;
const b = 2;
const c = a + b;
console.log(c);

会被压缩插件优化为：

console.log(3);

replace

可以替换变量名：

{
  "presets": ["@babel/preset-env"],
  "plugins": [["babel-plugin-uglify-siuying", {
    "replace": [
      { "original": "foo", "replacement": "bar" }
    ]
  }]]
}

设置该选项后，以下代码：

const foo = 'hello world';
console.log(foo);

会被压缩插件优化为：

const bar = 'hello world';
console.log(bar);

compress

可以自定义其他压缩行为：

-- -------------------- ---- -------
-
  ---------- ----------------------
  ---------- -------------------------------- -
    ----------- -
      ----------- -----
      --------------- -----
      --------------- -----
      --------------- ----
    -
  ---
-

设置该选项后，可以添加其他类型的压缩行为，例如压缩 boolean 类型、条件语句、移除 console 等。

示例代码

-- -------------------- ---- -------
----- ---------- - ---------- -
  ------------------ --------
--

----- --- - ------------- -
  --- -- --
--

----------------------

-----------

-------------

---------------------

------------ --------

压缩后：

alert("hello world");

结论

babel-plugin-uglify-siuying 是一个非常好用的 JavaScript 代码压缩插件，在项目中可以使用它来降低代码体积，提升网页性能。通过上述配置，可以使用该插件实现更多优化。

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