babel-plugin-minify-mangle-names

What is babel-plugin-minify-mangle-names?

The babel-plugin-minify-mangle-names package is a Babel plugin that minifies JavaScript code by mangling variable and function names. This helps reduce the size of the output file, which can improve load times and performance for web applications.

What are babel-plugin-minify-mangle-names's main functionalities?

Mangle Variable Names

This feature renames variables and function names to shorter versions, reducing the overall size of the code.

const babel = require('@babel/core');
const code = 'function add(a, b) { return a + b; }';
const output = babel.transformSync(code, { plugins: ['babel-plugin-minify-mangle-names'] });
console.log(output.code); // Output: function a(a,b){return a+b}

Mangle Function Names

This feature renames function names to shorter versions, which helps in reducing the size of the code.

const babel = require('@babel/core');
const code = 'function multiply(x, y) { return x * y; }';
const output = babel.transformSync(code, { plugins: ['babel-plugin-minify-mangle-names'] });
console.log(output.code); // Output: function a(a,b){return a*b}

Other packages similar to babel-plugin-minify-mangle-names

uglify-js

UglifyJS is a JavaScript parser, minifier, compressor, and beautifier toolkit. It provides more comprehensive minification options compared to babel-plugin-minify-mangle-names, including dead code removal and advanced optimizations.

terser

Terser is a JavaScript parser and mangler/compressor toolkit for ES6+. It is a fork of UglifyJS and offers similar functionalities with better support for modern JavaScript syntax. Terser is often used in build tools like Webpack for minifying JavaScript code.

babel-minify

Babel Minify is a Babel plugin that minifies JavaScript code. It includes a variety of minification plugins, including babel-plugin-minify-mangle-names. It provides a more integrated solution for Babel users who want to minify their code as part of the Babel transformation process.

README

babel-plugin-minify-mangle-names

Context- and scope- aware variable renaming.

Example

In

var globalVariableName = 42;
function foo() {
  var longLocalVariableName = 1;
  if (longLocalVariableName) {
    console.log(longLocalVariableName);
  }
}

Out

var globalVariableName = 42;
function foo() {
  var a = 1;
  if (a) {
    console.log(a);
  }
}

Installation

npm install babel-plugin-minify-mangle-names --save-dev

Usage

Via .babelrc (Recommended)

.babelrc

// without options
{
  "plugins": ["minify-mangle-names"]
}

// with options
{
  "plugins": [
    ["minify-mangle-names", { "exclude": { "foo": true, "bar": true} }]
  ]
}

Via CLI

babel --plugins minify-mangle-names script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["minify-mangle-names"]
});

Options

• exclude - A plain JS Object with keys as identifier names and values indicating whether to exclude (default: {})
• eval - mangle identifiers in scopes accessible by eval (default: false)
• keepFnName - prevent mangler from altering function names. Useful for code depending on fn.name (default: false)
• topLevel - mangle topLevel Identifiers (default: false)
• keepClassName - prevent mangler from altering class names (default: false).