Skip to content
/ minify Public

✂️ An ES6+ aware minifier based on the Babel toolchain (beta)

License

Notifications You must be signed in to change notification settings

babel/minify

Repository files navigation

babili (babel-minify)

An ES6+ aware minifier based on the Babel toolchain.

NPM Version Travis Status Code Coverage Slack Status NPM Downloads

Table of Contents

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

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.

Package Version Dependencies
babel-preset-babili npm Dependency Status

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

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
Amjad Masad Boopathi Rajaa Juriy Zaytsev Henry Zhu Vignesh Shanmugam
@amasad @boopathi @kangax @hzoo @vigneshshanmugam
@amasad @heisenbugger @kangax @left_pad @_vigneshh