babel-minify

An ES6+ aware minifier based on the Babel toolchain.

• Checkout our CONTRIBUTING.md if you want to help out!

• Babel-Minify is consumable via API, CLI, or Babel preset.

• Try it online - babeljs.io/repl

Note

Babili has been now renamed to Babel-Minify :).

Table of Contents

• Requirements
• Why
• CLI
• Babel Preset
• Individual Plugins
• Benchmarks
• Team

Requirements

• node >= 4
• babel >= 6.20.0

Why

Current tools don't support targeting the latest version of ECMAScript. (yet)

• BabelMinify can because it is just a set of Babel plugins, and Babel already understands new syntax with our parser Babylon.
• When it's possible to only target browsers that support newer ES features, code sizes can be smaller because you don't have to transpile and then minify.

Check out our blog post for more info!

// Example ES2015 Code
class Mangler {
  constructor(program) {
    this.program = program;
  }
}
new Mangler(); // without this it would just output nothing since Mangler isn't used

Before

// ES2015+ code -> Babel -> BabelMinify/Uglify -> Minified ES5 Code
var a=function a(b){_classCallCheck(this,a),this.program=b};new a;

After

// ES2015+ code -> BabelMinify -> Minified ES2015+ Code
class a{constructor(b){this.program=b}}new a;

CLI

Package	Version	Dependencies
babel-minify

Install

npm install babel-minify --save-dev

Usage

minify src -d lib

Babel preset

Package	Version	Dependencies
babel-preset-minify

Install

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

Usage

You'll most likely want to use it only in the production environment. Check out the env docs for more help.

Options specific to a certain environment are merged into and overwrite non-env specific options.

.babelrc:

{
  "presets": ["es2015"],
  "env": {
    "production": {
      "presets": ["minify"]
    }
  }
}

Then you'll need to set the env variable which could be something like BABEL_ENV=production npm run build

Individual Plugins

The minify repo is comprised of many npm packages. It is a lerna monorepo similar to babel itself.

The npm package babel-preset-minify is at the path packages/babel-preset-minify

Package	Version	Dependencies
babel-plugin-minify-constant-folding
babel-plugin-minify-dead-code-elimination
babel-plugin-minify-flip-comparisons
babel-plugin-minify-guarded-expressions
babel-plugin-minify-infinity
babel-plugin-minify-mangle-names
babel-plugin-minify-replace
babel-plugin-minify-simplify
babel-plugin-minify-type-constructors
babel-plugin-transform-member-expression-literals
babel-plugin-transform-merge-sibling-variables
babel-plugin-transform-minify-booleans
babel-plugin-transform-property-literals
babel-plugin-transform-simplify-comparison-operators
babel-plugin-transform-undefined-to-void

Usage

Normally you wouldn't be consuming the plugins directly since the preset is available.

Add to your .babelrc's plugins array.

{
  "plugins": ["babel-plugin-transform-undefined-to-void"]
}

Other

Package	Version	Dependencies
babel-plugin-transform-inline-environment-variables
babel-plugin-transform-node-env-inline
babel-plugin-transform-remove-console
babel-plugin-transform-remove-debugger

Benchmarks

Bootstrap: npm run bootstrap

Build: npm run build

Running the benchmarks: ./scripts/benchmark.js [file...] - defaults to a few packages fetched from unpkg.com and is defined in benchmark.js.

Note: All Input sources are ES5.

Benchmark Results for react.js:

Input Size: 141.63kB

Input Size (gzip): 33.66kB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babel-minify	40.63kB	71%	13.33kB	60%	2.49	1905.17
uglify	40.34kB	72%	13.12kB	61%	2.30	784.33
closure-compiler	39.45kB	72%	13.25kB	61%	2.62	2519.02
closure-compiler-js	47.23kB	67%	15.25kB	55%	3.76	6730.76
butternut	41.94kB	70%	13.53kB	60%	2.33	275.20

Benchmark Results for vue.js:

Input Size: 258.76kB

Input Size (gzip): 71.01kB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babel-minify	97.23kB	62%	36.09kB	49%	5.83	4986.36
uglify	96.95kB	63%	35.99kB	49%	5.78	1446.37
closure-compiler	95.29kB	63%	35.8kB	50%	6.28	3953.95
closure-compiler-js	98.53kB	62%	36.73kB	48%	6.00	10221.88

Benchmark Results for lodash.js:

Input Size: 526.94kB

Input Size (gzip): 93.91kB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babel-minify	69.14kB	87%	24.06kB	74%	8.37	4728.87
uglify	68.58kB	87%	24kB	74%	27.20	2340.07
closure-compiler	70.68kB	87%	24.11kB	74%	6.98	4718.42
closure-compiler-js	73.14kB	86%	24.85kB	74%	6.57	8148.38
butternut	72.06kB	86%	25.01kB	73%	6.95	514.93

Benchmark Results for three.js:

Input Size: 1015.5kB

Input Size (gzip): 202.89kB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babel-minify	497.33kB	51%	126.74kB	38%	25.16	14465.92
uglify	498.59kB	51%	125.66kB	38%	26.05	4419.97
closure-compiler	495.7kB	51%	126.48kB	38%	34.40	10623.86
closure-compiler-js	504.11kB	50%	127.84kB	37%	28.59	115045.71
butternut	505.93kB	50%	127.09kB	37%	31.12	1349.77

Browser support

Babel Minify is best at targeting latest browsers (with full ES6+ support) but can also be used with the usual Babel es2015 preset to transpile down the code first.

Team

Amjad Masad	Boopathi Rajaa	Juriy Zaytsev	Henry Zhu	Vignesh Shanmugam
@amasad	@boopathi	@kangax	@hzoo	@vigneshshanmugam
@amasad	@heisenbugger	@kangax	@left_pad	@_vigneshh