/minify

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

Primary LanguageJavaScriptMIT LicenseMIT

babel-minify

An ES6+ aware minifier based on the Babel toolchain.

NPM Version Travis Status CircleCI Status AppveyorCI Status Code Coverage Slack Status NPM Downloads

Note

Babili has been now renamed to Babel-Minify :).

Table of Contents

Requirements

  • node >= 4
  • babel >= 6.20.0

Why

Current tools don't support targeting the latest version of ECMAScript. (yet)

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

After

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

CLI

Package Version Dependencies
babel-minify npm Dependency Status

Install

npm install babel-minify --save-dev

Usage

minify src -d lib

Babel preset

Package Version Dependencies
babel-preset-minify npm Dependency Status

Install

npm install babel-preset-minify --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": ["minify"]
    }
  }
}

Then you'll need to set the env variable which could be something like BABEL_ENV=production npm run build

Individual Plugins

The minify repo is comprised of many npm packages. It is a lerna monorepo similar to babel itself.

The npm package babel-preset-minify is at the path packages/babel-preset-minify

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

Input Size (gzip): 33.66kB

minifier output raw raw win gzip output gzip win parse time (ms) minify time (ms)
babel-minify 40.63kB 71% 13.33kB 60% 2.49 1905.17
uglify 40.34kB 72% 13.12kB 61% 2.30 784.33
closure-compiler 39.45kB 72% 13.25kB 61% 2.62 2519.02
closure-compiler-js 47.23kB 67% 15.25kB 55% 3.76 6730.76
butternut 41.94kB 70% 13.53kB 60% 2.33 275.20

Benchmark Results for vue.js:

Input Size: 258.76kB

Input Size (gzip): 71.01kB

minifier output raw raw win gzip output gzip win parse time (ms) minify time (ms)
babel-minify 97.23kB 62% 36.09kB 49% 5.83 4986.36
uglify 96.95kB 63% 35.99kB 49% 5.78 1446.37
closure-compiler 95.29kB 63% 35.8kB 50% 6.28 3953.95
closure-compiler-js 98.53kB 62% 36.73kB 48% 6.00 10221.88

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)
babel-minify 69.14kB 87% 24.06kB 74% 8.37 4728.87
uglify 68.58kB 87% 24kB 74% 27.20 2340.07
closure-compiler 70.68kB 87% 24.11kB 74% 6.98 4718.42
closure-compiler-js 73.14kB 86% 24.85kB 74% 6.57 8148.38
butternut 72.06kB 86% 25.01kB 73% 6.95 514.93

Benchmark Results for three.js:

Input Size: 1015.5kB

Input Size (gzip): 202.89kB

minifier output raw raw win gzip output gzip win parse time (ms) minify time (ms)
babel-minify 497.33kB 51% 126.74kB 38% 25.16 14465.92
uglify 498.59kB 51% 125.66kB 38% 26.05 4419.97
closure-compiler 495.7kB 51% 126.48kB 38% 34.40 10623.86
closure-compiler-js 504.11kB 50% 127.84kB 37% 28.59 115045.71
butternut 505.93kB 50% 127.09kB 37% 31.12 1349.77

Browser support

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