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
- node >= 4
- babel >= 6.20.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 usedBefore
// 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.
npm install babili --save-devbabili src -d libEquivalent to:
babel src -d lib --presets=babili --no-babelrcNote 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 install babel-preset-babili --save-devYou'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
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-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 [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 | 35.86kB | 71% | 12.47kB | 58% | 2.49 | 1840.76 |
| uglify | 35.74kB | 71% | 11.97kB | 60% | 2.43 | 798.81 |
| closureCompiler | 34.77kB | 72% | 11.96kB | 60% | 3.11 | 2726.80 |
| closureCompilerJs | 65.41kB | 48% | 15.83kB | 47% | 2.98 | 1109.41 |
| butternut | 37.16kB | 70% | 12.4kB | 58% | 2.32 | 222.86 |
Benchmark Results for vue.js:
Input Size: 238.7kB
Input Size (gzip): 65.76kB
| minifier | output raw | raw win | gzip output | gzip win | parse time (ms) | minify time (ms) |
|---|---|---|---|---|---|---|
| babili | 98.24kB | 59% | 35.2kB | 46% | 7.84 | 5673.69 |
| uglify | 90.53kB | 62% | 33.58kB | 49% | 6.10 | 1686.80 |
| closureCompiler | 88.51kB | 63% | 33.49kB | 49% | 8.56 | 3350.70 |
| closureCompilerJs | 91.68kB | 62% | 34.39kB | 48% | 10.08 | 12221.72 |
| butternut | 93.56kB | 61% | 34.24kB | 48% | 12.21 | 765.93 |
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.98kB | 85% | 25.41kB | 73% | 9.96 | 5828.37 |
| uglify | 69.18kB | 87% | 24.57kB | 74% | 13.31 | 2710.79 |
| closureCompiler | 70.68kB | 87% | 24.11kB | 74% | 7.86 | 4523.72 |
| closureCompilerJs | 73.13kB | 86% | 24.85kB | 74% | 9.62 | 8564.78 |
| butternut | 72.19kB | 86% | 25.24kB | 73% | 6.98 | 717.95 |
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 | 523.09kB | 48% | 130.14kB | 35% | 31.25 | 16050.42 |
| uglify | 496.43kB | 50% | 124.46kB | 38% | 28.11 | 5663.19 |
| closureCompiler | 491.56kB | 51% | 124.93kB | 38% | 33.68 | 8527.89 |
| closureCompilerJs | 500.18kB | 50% | 126.14kB | 37% | 28.13 | 99797.53 |
| butternut | 508.71kB | 49% | 127.06kB | 36% | 39.21 | 1783.69 |
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.
| Amjad Masad | Boopathi Rajaa | Juriy Zaytsev | Henry Zhu | Vignesh Shanmugam |
| @amasad | @boopathi | @kangax | @hzoo | @vigneshshanmugam |
| @amasad | @heisenbugger | @kangax | @left_pad | @_vigneshh |