babel-minify (beta)

An ES6+ aware minifier based on the Babel toolchain.

• babel-minify is consumable via API, CLI, or Babel preset. Try it online - babeljs.io/repl

Historical note: babel-minify was renamed from babili.

Table of Contents

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

Experimental

babel-minify is an experimental project that attempts to use Babel’s toolchain (for compilation) to do something in a similar vein, minification. It’s currently in 0.x, so we don’t recommend using it in production.

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

Requirements

• node >= 6
• 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

note: minify is still in beta, so we don’t recommend using it for production code but rather the production environment.

When testing, it’s recommended to run minifiers for production so less code is sent to end-users vs. in development where it can be an issue for readability when debugging. 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: 54.79KB

Input Size (gzip): 15.11KB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babel-minify	15.97KB	71%	6.08KB	60%	1.00	1039.06
terser	15.65KB	71%	5.98KB	60%	0.93	532.19
uglify	15.6KB	72%	6KB	60%	1.09	463.69
closure-compiler	15.74KB	71%	6.04KB	60%	1.22	2361.41
closure-compiler-js	18.21KB	67%	6.73KB	55%	1.08	3381.47

Benchmark Results for vue.js:

Input Size: 282.52KB

Input Size (gzip): 77.52KB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babel-minify	104.21KB	63%	38.71KB	50%	6.09	3538.30
terser	103.12KB	63%	37.92KB	51%	6.42	1680.85
uglify	102.71KB	64%	38.08KB	51%	6.59	1662.50
closure-compiler	101.93KB	64%	38.6KB	50%	10.41	4413.06
closure-compiler-js	105.18KB	63%	39.5KB	49%	6.79	12082.80

Benchmark Results for lodash.js:

Input Size: 527.18KB

Input Size (gzip): 94.04KB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babel-minify	69.59KB	87%	24.37KB	74%	5.38	2587.27
terser	68.66KB	87%	24.31KB	74%	6.41	1913.43
uglify	68.15KB	87%	24.05KB	74%	5.89	2075.71
closure-compiler	71.05KB	87%	24.19KB	74%	6.24	4119.43
closure-compiler-js	73.51KB	86%	24.94KB	73%	5.17	9650.59

Benchmark Results for three.js:

Input Size: 1.05MB

Input Size (gzip): 212.43KB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babel-minify	535.88KB	50%	134.66KB	37%	27.24	9988.57
terser	536.16KB	50%	132.78KB	37%	28.39	3919.34
uglify	533.42KB	50%	133.21KB	37%	26.15	4025.20
closure-compiler	532.44KB	51%	134.41KB	37%	29.96	9029.19
closure-compiler-js	543.08KB	50%	136.3KB	36%	24.36	95743.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