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

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)

• 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: 133.2kB

Input Size (gzip): 31.03kB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babili	37.89kB	72%	12.54kB	60%	2.39	2262.64
uglify	37.7kB	72%	12.4kB	60%	2.68	1019.53
closureCompiler	36.73kB	72%	12.45kB	60%	3.01	2692.87
closureCompilerJs	44.58kB	67%	14.54kB	53%	2.89	6591.58
butternut	39.2kB	71%	12.81kB	59%	2.88	281.72

Benchmark Results for vue.js:

Input Size: 248.78kB

Input Size (gzip): 68.52kB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babili	93.49kB	62%	34.81kB	49%	7.18	6370.95
uglify	93.39kB	62%	34.81kB	49%	7.30	1987.65
closureCompiler	91.59kB	63%	34.65kB	49%	8.88	5473.73
closureCompilerJs	94.76kB	62%	35.59kB	48%	7.64	11745.57
butternut	88.73kB	64%	32.5kB	53%	8.56	630.11

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	69.14kB	87%	24.05kB	74%	11.16	6535.34
uglify	69.52kB	87%	24.56kB	74%	12.47	2851.70
closureCompiler	70.68kB	87%	24.11kB	74%	7.66	3354.93
closureCompilerJs	73.13kB	86%	24.85kB	74%	6.86	8322.49
butternut	72.06kB	86%	25.01kB	73%	7.14	551.87

Benchmark Results for three.js:

Input Size: 1008.64kB

Input Size (gzip): 200.53kB

minifier	output raw	raw win	gzip output	gzip win	parse time (ms)	minify time (ms)
babili	494.37kB	51%	125.29kB	38%	30.32	17559.82
uglify	496.84kB	51%	124.78kB	38%	29.24	5967.98
closureCompiler	492.85kB	51%	125.25kB	38%	29.95	7814.26
closureCompilerJs	501.21kB	50%	126.43kB	37%	27.05	99787.15
butternut	502.99kB	50%	125.87kB	37%	63.84	1524.92

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