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

• node >= 4
• babel-core >= 6.19.0

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;

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.

babili src -d lib

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

Package	Version	Dependencies
babel-preset-babili

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

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

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

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"]
}

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

Bootstrap: npm run bootstrap Build: npm run build

Running the benchmarks: ./scripts/benchmark.js <package>[@version] [relative-path/file.js] - defaults to the package's main file if no file provided.

Backbone.js v1.2.3:

           raw     raw win gzip   gzip win parse time run
babili     21.72kB 222%    7.27kB 170%     2ms        859ms
uglify     21.79kB 221%    7.29kB 169%     3ms        314ms
closure    21.67kB 223%    7.37kB 167%     2ms        1635ms
closure js 24.01kB 191%    8.04kB 144%     2ms        4189ms

Run with: ./scripts/benchmark.js [email protected]

React v0.14.3:

          raw      raw win gzip    gzip win parse time run
closure    171.46kB 265%    52.97kB 168%     14ms       4131ms
uglify     176.36kB 255%    53.13kB 167%     12ms       1654ms
babili     176.59kB 255%    53.23kB 166%     15ms       4641ms
closure js 173.95kB 260%    53.53kB 165%     11ms       13792ms

Run with: ./scripts/benchmark.js [email protected] react/dist/react.js

jQuery v1.11.3:

           raw      raw win gzip    gzip win parse time run
uglify     94.27kB 218%    32.78kB 158%     11ms       1394ms
babili     94.6kB  217%    32.86kB 157%     16ms       5348ms
closure    94.23kB 218%    33.38kB 153%     12ms       3152ms
closure js 95.64kB 213%    33.78kB 150%     10ms       14145ms

Run with: ./scripts/benchmark.js [email protected]

Three.js:

           raw      raw win gzip     gzip win parse time run
closure    472.57kB 107%    122.22kB 61%      29ms       4100ms
uglify     478.79kB 104%    122.53kB 61%      28ms       3648ms
closure js 480.11kB 104%    123.44kB 60%      28ms       64889ms
babili     507.96kB 93%     127.85kB 54%      33ms       9282ms

Run with: ./scripts/benchmark.js [email protected] three/build/three.js

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.

Babili requires Babel 6.14+

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