babel-plugin-transform-undefined-to-void

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

Showing:

Popularity

Downloads/wk

1.1M

GitHub Stars

4.3K

Maintenance

Last Commit

1yr ago

Contributors

76

Package

Dependencies

0

Size (min+gzip)

0.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

babel-minify (beta)

An ES6+ aware minifier based on the Babel toolchain.

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

  • babel-minify is consumable via API, CLI, or Babel preset. Try it online - babeljs.io/repl

Historical note: babel-minify was renamed from babili.

Table of Contents

Experimental

babel-minify is an experimental project that attempts to use Babel's toolchain (for compilation) to do something in a similar vein, minification. It's currently in 0.x, so we don't recommend using it in production.

Checkout our CONTRIBUTING.md if you want to help out!

Requirements

  • node >= 6
  • 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

PackageVersionDependencies
babel-minifynpmDependency Status

Install

npm install babel-minify --save-dev

Usage

minify src -d lib

Babel preset

PackageVersionDependencies
babel-preset-minifynpmDependency Status

Install

npm install babel-preset-minify --save-dev

Usage

note: minify is still in beta, so we don't recommend using it for production code but rather the production environment.

When testing, it's recommended to run minifiers for production so less code is sent to end-users vs. in development where it can be an issue for readability when debugging. 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

PackageVersionDependencies
babel-plugin-minify-constant-foldingnpmDependency Status
babel-plugin-minify-dead-code-eliminationnpmDependency Status
babel-plugin-minify-flip-comparisonsnpmDependency Status
babel-plugin-minify-guarded-expressionsnpmDependency Status
babel-plugin-minify-infinitynpmDependency Status
babel-plugin-minify-mangle-namesnpmDependency Status
babel-plugin-minify-replacenpmDependency Status
babel-plugin-minify-simplifynpmDependency Status
babel-plugin-minify-type-constructorsnpmDependency Status
babel-plugin-transform-member-expression-literalsnpmDependency Status
babel-plugin-transform-merge-sibling-variablesnpmDependency Status
babel-plugin-transform-minify-booleansnpmDependency Status
babel-plugin-transform-property-literalsnpmDependency Status
babel-plugin-transform-simplify-comparison-operatorsnpmDependency Status
babel-plugin-transform-undefined-to-voidnpmDependency 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

PackageVersionDependencies
babel-plugin-transform-inline-environment-variablesnpmDependency Status
babel-plugin-transform-node-env-inlinenpmDependency Status
babel-plugin-transform-remove-consolenpmDependency Status
babel-plugin-transform-remove-debuggernpmDependency 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: 54.79KB

Input Size (gzip): 15.11KB

minifieroutput rawraw wingzip outputgzip winparse time (ms)minify time (ms)
babel-minify15.97KB71%6.08KB60%1.001039.06
terser15.65KB71%5.98KB60%0.93532.19
uglify15.6KB72%6KB60%1.09463.69
closure-compiler15.74KB71%6.04KB60%1.222361.41
closure-compiler-js18.21KB67%6.73KB55%1.083381.47

Benchmark Results for vue.js:

Input Size: 282.52KB

Input Size (gzip): 77.52KB

minifieroutput rawraw wingzip outputgzip winparse time (ms)minify time (ms)
babel-minify104.21KB63%38.71KB50%6.093538.30
terser103.12KB63%37.92KB51%6.421680.85
uglify102.71KB64%38.08KB51%6.591662.50
closure-compiler101.93KB64%38.6KB50%10.414413.06
closure-compiler-js105.18KB63%39.5KB49%6.7912082.80

Benchmark Results for lodash.js:

Input Size: 527.18KB

Input Size (gzip): 94.04KB

minifieroutput rawraw wingzip outputgzip winparse time (ms)minify time (ms)
babel-minify69.59KB87%24.37KB74%5.382587.27
terser68.66KB87%24.31KB74%6.411913.43
uglify68.15KB87%24.05KB74%5.892075.71
closure-compiler71.05KB87%24.19KB74%6.244119.43
closure-compiler-js73.51KB86%24.94KB73%5.179650.59

Benchmark Results for three.js:

Input Size: 1.05MB

Input Size (gzip): 212.43KB

minifieroutput rawraw wingzip outputgzip winparse time (ms)minify time (ms)
babel-minify535.88KB50%134.66KB37%27.249988.57
terser536.16KB50%132.78KB37%28.393919.34
uglify533.42KB50%133.21KB37%26.154025.20
closure-compiler532.44KB51%134.41KB37%29.969029.19
closure-compiler-js543.08KB50%136.3KB36%24.3695743.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 MasadBoopathi RajaaJuriy ZaytsevHenry ZhuVignesh Shanmugam
Amjad MasadBoopathi RajaaJuriy ZaytsevHenry ZhuVignesh Shanmugam
@amasad@boopathi@kangax@hzoo@vigneshshanmugam
@amasad@heisenbugger@kangax@left_pad@_vigneshh

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100