babili (babel-minify)

An ES6+ aware minifier based on the Babel toolchain.

Checkout our CONTRIBUTING.md if you want to help out!
Babili is consumable via API, CLI, or Babel preset.
Try it online - babeljs.io/repl

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)

Babili 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 -> Babili/Uglify -> Minified ES5 Code
var a=function a(b){_classCallCheck(this,a),this.program=b};new a;

After

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

CLI

Package	Version	Dependencies
`babili`

This is simple wrapper around the regular babel-cli and thus takes in the same cli options as running babel on its own. You can use this if you don't already use babel or want to run it standalone.

Install

npm install babili --save-dev

Usage

babili src -d lib

Equivalent to:

babel src -d lib --presets=babili --no-babelrc

Note that, because the babili command uses the default preset with no-babelrc, you cannot set any non-default options in the preset's plugins with this command. To do this, you can use the babel command with the options set in a .babelrc. See the preset docs for more information on how to do this.

Babel preset

Package	Version	Dependencies
`babel-preset-babili`

Install

npm install babel-preset-babili --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": ["babili"]
    }
  }
}

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

Individual Plugins

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

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

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: 124.7kB

Input Size (gzip): 29.82kB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babili	36.13kB	71%	12.6kB	58%	3.14	1995.80
uglify	35.73kB	71%	11.96kB	60%	2.28	770.76
closureCompiler	34.77kB	72%	11.96kB	60%	2.62	3940.01
closureCompilerJs	65.41kB	48%	15.83kB	47%	2.96	1049.21

Benchmark Results for vue.js:

Input Size: 234.23kB

Input Size (gzip): 64.53kB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babili	96.41kB	59%	34.55kB	46%	8.01	6754.26
uglify	88.9kB	62%	32.77kB	49%	7.17	1696.36
closureCompiler	86.94kB	63%	32.75kB	49%	6.70	7625.19
closureCompilerJs	90.09kB	62%	33.67kB	48%	6.48	11422.21

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)
babili	76.07kB	86%	25.42kB	73%	7.93	5923.21
uglify	70.25kB	87%	24.48kB	74%	6.31	1533.58
closureCompiler	70.68kB	87%	24.11kB	74%	7.74	7455.41
closureCompilerJs	73.11kB	86%	24.82kB	74%	7.94	8276.89

Benchmark Results for three.js:

Input Size: 1002.36kB

Input Size (gzip): 199.96kB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babili	526.27kB	47%	130.08kB	35%	34.22	17339.80
uglify	496.16kB	51%	123.99kB	38%	30.37	5524.94
closureCompiler	491.56kB	51%	124.93kB	38%	33.72	13765.79
closureCompilerJs	499.81kB	50%	126.02kB	37%	35.50	98327.82

Browser support

Babili 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