babili 0,1,4,1,5,0,4 editorconfig eslint travis-ci npm

:scissors: An ES6+ aware minifier based on the Babel toolchain (beta)

2 years after MIT

babili (babel-minify)

An ES6+ aware minifier based on the Babel toolchain.

NPM Version Travis Status CircleCI 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;

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.

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.

Babel preset

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: 133.2kB

Input Size (gzip): 31.03kB

minifier output raw raw win gzip output gzip win parse time (ms) minify time (ms)
babili 37.89kB 72% 12.54kB 60% 2.39 2262.64
uglify 37.7kB 72% 12.4kB 60% 2.68 1019.53
closureCompiler 36.73kB 72% 12.45kB 60% 3.01 2692.87
closureCompilerJs 44.58kB 67% 14.54kB 53% 2.89 6591.58
butternut 39.2kB 71% 12.81kB 59% 2.88 281.72

Benchmark Results for vue.js:

Input Size: 248.78kB

Input Size (gzip): 68.52kB

minifier output raw raw win gzip output gzip win parse time (ms) minify time (ms)
babili 93.49kB 62% 34.81kB 49% 7.18 6370.95
uglify 93.39kB 62% 34.81kB 49% 7.30 1987.65
closureCompiler 91.59kB 63% 34.65kB 49% 8.88 5473.73
closureCompilerJs 94.76kB 62% 35.59kB 48% 7.64 11745.57
butternut 88.73kB 64% 32.5kB 53% 8.56 630.11

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 69.14kB 87% 24.05kB 74% 11.16 6535.34
uglify 69.52kB 87% 24.56kB 74% 12.47 2851.70
closureCompiler 70.68kB 87% 24.11kB 74% 7.66 3354.93
closureCompilerJs 73.13kB 86% 24.85kB 74% 6.86 8322.49
butternut 72.06kB 86% 25.01kB 73% 7.14 551.87

Benchmark Results for three.js:

Input Size: 1008.64kB

Input Size (gzip): 200.53kB

minifier output raw raw win gzip output gzip win parse time (ms) minify time (ms)
babili 494.37kB 51% 125.29kB 38% 30.32 17559.82
uglify 496.84kB 51% 124.78kB 38% 29.24 5967.98
closureCompiler 492.85kB 51% 125.25kB 38% 29.95 7814.26
closureCompilerJs 501.21kB 50% 126.43kB 37% 27.05 99787.15
butternut 502.99kB 50% 125.87kB 37% 63.84 1524.92

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

Related Repositories

babel-standalone

babel-standalone

Standalone build of Babel for use in non-Node.js environments, including browser ...

babel-standalone

babel-standalone

Standalone build of Babel for use in non-Node.js environments, including browser ...

babel-webpack-tree-shaking

babel-webpack-tree-shaking

Tree-shaking example with Babel and Webpack ...

babili-webpack-plugin

babili-webpack-plugin

Babili Webpack Plugin for minification ...

typescript-webpack-tree-shaking

typescript-webpack-tree-shaking

Tree-shaking example with Typescript and Webpack ...


Top Contributors

amasad hzoo boopathi kangax thejameskyle bfred-it kittens goto-bus-stop gigabo rossipedia chrisvasz Daniel15 mathiasbynens Dominator008 tomByrer sixinli renaesop

Dependencies

package version
dev babel-core ^6.25.0
babel-eslint ^7.2.3
babel-jest ^20.0.3
babel-plugin-transform-es2015-block-scoping ^6.24.1
babel-preset-env ^1.6.0
babel-preset-es2015 ^6.24.1
babel-traverse ^6.25.0
butternut ^0.4.6
bytes ^2.5.0
chalk ^2.0.1
cli-table ^0.3.1
closure-compiler ^0.2.12
codecov ^2.2.0
commander ^2.11.0
eslint ^4.1.1
google-closure-compiler-js ^20170626.0.0
gulp github:gulpjs/gulp#4.0
gulp-babel ^6.1.2
gulp-newer ^1.1.0
gulp-util ^3.0.8
jest-cli ^20.0.4
lerna ^2.0.0
lerna-changelog ^0.5.0
markdown-table ^1.1.0
prettier ^1.5.2
request ^2.81.0
through2 ^2.0.1
uglify-js ^3.0.23

Releases

-   v0.0.1 zip tar
-   babel-plugin-transfo zip tar
-   babel-plugin-minify- zip tar
-   babel-plugin-minify- zip tar
-   babel-plugin-minify- zip tar
-   babel-plugin-minify- zip tar
-   babel-plugin-minify- zip tar
-   babel-plugin-minify- zip tar
-   babel-plugin-minify- zip tar