/babili

Babel preset and cli for minification (beta)

Primary LanguageJavaScriptMIT LicenseMIT

babili (babel-minify)

An ES6+ aware minifier based on the Babel toolchain.

Travis Status Slack Status

  • 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.

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

After

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

CLI

Package Version Dependencies
babili npm Dependency Status

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

Babel preset

Package Version Dependencies
babel-preset-babili npm Dependency Status

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

Plugins (in babel-preset-babili)

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 npm Dependency Status
babel-plugin-minify-dead-code-elimination npm Dependency Status
babel-plugin-minify-flip-comparisons npm Dependency Status
babel-plugin-minify-guarded-expressions npm Dependency Status
babel-plugin-minify-infinity npm Dependency Status
babel-plugin-minify-mangle-names npm Dependency Status
babel-plugin-minify-replace npm Dependency Status
babel-plugin-minify-simplify npm Dependency Status
babel-plugin-minify-type-constructors npm Dependency Status
babel-plugin-transform-member-expression-literals npm Dependency Status
babel-plugin-transform-merge-sibling-variables npm Dependency Status
babel-plugin-transform-minify-booleans npm Dependency Status
babel-plugin-transform-property-literals npm Dependency Status
babel-plugin-transform-simplify-comparison-operators npm Dependency Status
babel-plugin-transform-undefined-to-void npm Dependency Status

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 npm Dependency Status
babel-plugin-transform-inline-environment-variables npm Dependency Status
babel-plugin-transform-node-env-inline npm Dependency Status
babel-plugin-transform-remove-console npm Dependency Status
babel-plugin-transform-remove-debugger npm Dependency Status

Benchmarks

Bootstrap: npm run bootstrap

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        379ms
closure    21.67kB 223%    7.37kB 167%     3ms        4083ms
babili     21.62kB 223%    7.4kB  165%     2ms        1072ms
closure js 29.45kB 137%    8.07kB 144%     1ms        5822ms

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%     16ms       9481ms
uglify     176.36kB 255%    53.13kB 167%     13ms       1552ms
babili     177.28kB 253%    55.18kB 157%     14ms       4403ms
closure js 229.62kB 173%    58.57kB 142%     14ms       16834ms

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%     9ms        1388ms
closure    94.23kB  218%    33.38kB 153%     20ms       10805ms
babili     101.52kB 195%    35kB    141%     10ms       6045ms
closure js 135.64kB 121%    37.91kB 123%     10ms       16360ms

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