An ES6+ aware minifier based on the Babel toolchain.
babel-minify is consumable via API, CLI, or Babel preset. Try it online - babeljs.io/replHistorical note: babel-minify was renamed from babili.
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!
Current tools don't support targeting the latest version of ECMAScript. (yet)
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;
npm install babel-minify --save-dev
npm install babel-preset-minify --save-dev
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
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
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"]
}
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
minifier output raw raw win gzip output gzip win parse time (ms) minify time (ms) babel-minify 15.97KB 71% 6.08KB 60% 1.00 1039.06 terser 15.65KB 71% 5.98KB 60% 0.93 532.19 uglify 15.6KB 72% 6KB 60% 1.09 463.69 closure-compiler 15.74KB 71% 6.04KB 60% 1.22 2361.41 closure-compiler-js 18.21KB 67% 6.73KB 55% 1.08 3381.47Benchmark Results for vue.js:
Input Size: 282.52KB
Input Size (gzip): 77.52KB
minifier output raw raw win gzip output gzip win parse time (ms) minify time (ms) babel-minify 104.21KB 63% 38.71KB 50% 6.09 3538.30 terser 103.12KB 63% 37.92KB 51% 6.42 1680.85 uglify 102.71KB 64% 38.08KB 51% 6.59 1662.50 closure-compiler 101.93KB 64% 38.6KB 50% 10.41 4413.06 closure-compiler-js 105.18KB 63% 39.5KB 49% 6.79 12082.80Benchmark Results for lodash.js:
Input Size: 527.18KB
Input Size (gzip): 94.04KB
minifier output raw raw win gzip output gzip win parse time (ms) minify time (ms) babel-minify 69.59KB 87% 24.37KB 74% 5.38 2587.27 terser 68.66KB 87% 24.31KB 74% 6.41 1913.43 uglify 68.15KB 87% 24.05KB 74% 5.89 2075.71 closure-compiler 71.05KB 87% 24.19KB 74% 6.24 4119.43 closure-compiler-js 73.51KB 86% 24.94KB 73% 5.17 9650.59Benchmark Results for three.js:
Input Size: 1.05MB
Input Size (gzip): 212.43KB
minifier output raw raw win gzip output gzip win parse time (ms) minify time (ms) babel-minify 535.88KB 50% 134.66KB 37% 27.24 9988.57 terser 536.16KB 50% 132.78KB 37% 28.39 3919.34 uglify 533.42KB 50% 133.21KB 37% 26.15 4025.20 closure-compiler 532.44KB 51% 134.41KB 37% 29.96 9029.19 closure-compiler-js 543.08KB 50% 136.3KB 36% 24.36 95743.77Babel 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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4