babili (babel-minify)

An ES6+ aware minifier based on the Babel toolchain.

• NOTE: We are in a feature freeze as we're trying to hammer out all the bugs to get to beta release. The best way to contribute is to test, report bugs, and add test cases.

• 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

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

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.

Usage

babili src -d lib

Equivalent to: babel src -d lib --presets=babili --no-babelrc

Babel preset

Package	Version	Dependencies
babel-preset-babili

It's a Babel preset (like babel-preset-es2015).

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-minify-empty-function
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.js

Backbone.js:

           raw     raw win gzip   gzip win parse time run
uglify     21.79kB 221%    7.29kB 169%     2ms        320ms
closure    21.67kB 223%    7.37kB 167%     2ms        1408ms
babili     21.86kB 220%    7.46kB 163%     2ms        740ms
closure js 24.01kB 191%    8.04kB 144%     2ms        3493ms

Run with: ./scripts/benchmark.js ./scripts/fixtures/backbone.js

React:

          raw      raw win gzip    gzip win parse time run
closure    171.46kB 265%    52.97kB 168%     13ms       2349ms
uglify     176.36kB 255%    53.13kB 167%     12ms       1889ms
closure js 173.95kB 260%    53.53kB 165%     12ms       12301ms
babili     178.06kB 252%    55.28kB 156%     14ms       3282ms

Run with: ./scripts/benchmark.js ./scripts/fixtures/react.js

jQuery:

           raw      raw win gzip    gzip win parse time run
uglify     94.27kB 218%    32.78kB 158%     8ms        1265ms
closure    94.23kB 218%    33.38kB 153%     10ms       2047ms
closure js 95.64kB 213%    33.78kB 150%     8ms        9980ms
babili     102.8kB 191%    35.26kB 140%     14ms       3786ms

Run with: ./scripts/benchmark.js ./scripts/fixtures/jquery.js

Team

| | | ---|---|---|---|---| Amjad Masad @amasad | Boopathi Rajaa @boopathi | Juriy Zaytsev @kangax | Henry Zhu @hzoo @amasad | @heisenbugger | @kangax | @left_pad