babel-preset-minify

What is babel-preset-minify?

babel-preset-minify is a Babel preset that allows you to minify your JavaScript code. It includes a collection of Babel plugins that perform various code optimizations and transformations to reduce the size of your JavaScript files.

What are babel-preset-minify's main functionalities?

Remove Console Statements

This feature removes all console statements from your code, which can help reduce the size of your JavaScript files and improve performance.

const code = `console.log('Hello World');`; // After minification: ''

Dead Code Elimination

This feature eliminates dead code that will never be executed, further reducing the size of your JavaScript files.

const code = `if (false) { console.log('This will be removed'); }`; // After minification: ''

Mangle Variable Names

This feature shortens variable and function names to single characters, which can significantly reduce the size of your JavaScript files.

const code = `function add(a, b) { return a + b; }`; // After minification: 'function a(b,c){return b+c}'

Other packages similar to babel-preset-minify

uglify-js

UglifyJS is a JavaScript parser, minifier, compressor, and beautifier toolkit. It is one of the most popular tools for minifying JavaScript and offers a wide range of options for code optimization. Compared to babel-preset-minify, UglifyJS is more mature and widely used, but it may not integrate as seamlessly with Babel.

terser

Terser is a JavaScript parser and mangler/compressor toolkit for ES6+. It is a fork of UglifyJS that aims to retain API and CLI compatibility with UglifyJS while improving support for modern JavaScript features. Terser is often preferred over UglifyJS for projects using ES6+ syntax. Compared to babel-preset-minify, Terser offers more advanced minification options and better support for modern JavaScript.

closure-compiler

Google Closure Compiler is a tool for making JavaScript download and run faster. It parses your JavaScript, analyzes it, removes dead code, and rewrites and minimizes what's left. It also checks syntax, variable references, and types. Compared to babel-preset-minify, Closure Compiler offers more aggressive optimizations and advanced features like type checking, but it can be more complex to configure and use.

README

babel-preset-minify

Babel preset for all minify plugins.

• Install
• Usage
• Options

Install

npm install babel-preset-minify --save-dev

Usage

Via .babelrc (Recommended)

.babelrc

{
  "presets": ["minify"]
}

or pass in options -

{
  "presets": [["minify", {
    "mangle": {
      "exclude": ["MyCustomError"]
    },
    "unsafe": {
      "typeConstructors": false
    },
    "keepFnName": true
  }]]
}

Via CLI

babel script.js --presets minify

Via Node API

require("@babel/core").transform("code", {
  presets: ["minify"]
});

Options

Two types of options:

1. 1-1 mapping with plugin
2. The same option passed to multiple plugins

1-1 mapping with plugin

• false - disable plugin
• true - enable plugin
• { ...pluginOpts } - enable plugin and pass pluginOpts to plugin

OptionName	Plugin	DefaultValue
booleans	transform-minify-booleans	true
builtIns	minify-builtins	true
consecutiveAdds	transform-inline-consecutive-adds	true
deadcode	minify-dead-code-elimination	true
evaluate	minify-constant-folding	true
flipComparisons	minify-flip-comparisons	true
guards	minify-guarded-expressions	true
infinity	minify-infinity	true
mangle	minify-mangle-names	true
memberExpressions	transform-member-expression-literals	true
mergeVars	transform-merge-sibling-variables	true
numericLiterals	minify-numeric-literals	true
propertyLiterals	transform-property-literals	true
regexpConstructors	transform-regexp-constructors	true
removeConsole	transform-remove-console	false
removeDebugger	transform-remove-debugger	false
removeUndefined	transform-remove-undefined	true
replace	minify-replace	true
simplify	minify-simplify	true
simplifyComparisons	transform-simplify-comparison-operators	true
typeConstructors	minify-type-constructors	true
undefinedToVoid	transform-undefined-to-void	true

The same option passed to multiple plugins

• When multiple plugins require the same option, it's easier to declare it in one place. These options are passed on to two or more plugins.

OptionName	Plugins
keepFnName	Passed to mangle & deadcode
keepClassName	Passed to mangle & deadcode
tdz	Passed to builtIns, evaluate, deadcode, removeUndefined

Examples

{
  "presets": [["minify", {
    "evaluate": false,
    "mangle": true
  }]]
}

{
  "presets": [["minify", {
    "mangle": {
      "exclude": ["ParserError", "NetworkError"]
    }
  }]]
}

{
  "presets": [["minify", {
    "keepFnName": true
  }]]
}
// is the same as
{
  "presets": [["minify", {
    "mangle": {
      "keepFnName": true
    },
    "deadcode": {
      "keepFnName": true
    }
  }]]
}