Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

babel-minify vs terser (instead uglify-js)

I'm relatively new to ES6+ (called modern JavaScript) but it seems if I want to use it in browsers I need babel-minify or terser. (First I thought Babili is another player but it's just the old name of Babel-Minify)

About polyfills for the browser there are production ready solutions like @babel/polyfill or Polyfill.io and with them it can be achieved to send smaller + faster code to modern browsers because they need no/few polyfills (test the browser quickly, load the needed polyfills dynamically and then start our app's main script). So it seems absolutely reasonable to use these modern technologies.

Here comes my dilemma about choosing babel-minify or terser.

The Webpack team decided to switch to terser in upcoming Webpack 5.
The Babel team made a comparison table showing terser is much better in speed.
The docs says that terser is a fork of uglify-es which was widely used before.

These makes me think that I have to choose terser.

But on the other hand, Babel is still needed for transforming (and can be used for many useful things). They are in the business a long time ago (although Babili/babel-minify was first released on August 26, 2016, so uglify is older). They have a great developer community on GitHub, bugs may have discovered and fixed sooner. Based on these I feel more trust to them when it comes to production safe output. But I haven't found any article showing the pro's of babel-minify over terser.

Questions:

I would go with terser because it seems promising and the reasons written above, but:

  • What are the cases when I should use babel-minify over terser?
  • Does it have any advantages of doing all the things with Babel packages?
like image 816
szegheo Avatar asked Oct 05 '18 09:10

szegheo


People also ask

What is the difference between minify and uglify?

Minification is just removing unnecesary whitespace and redundant / optional tokens like curlys and semicolons, and can be reversed by using a linter. Uglification is the act of transforming the code into an "unreadable" form, that is, renaming variables/functions to hide the original intent...

Does Uglify support ES6?

uglify-es is no longer maintained and uglify-js does not support ES6+.

What is Terser used for?

Terser can generate a source map file, which is highly useful for debugging your compressed JavaScript. To get a source map, pass --source-map --output output. js (source map will be written out to output.


1 Answers

In most cases, it won't matter too much whether or not you use terser or babel-minify. That said, the benefit to using babel-minify would be tight integration with the rest of the babel ecosystem. If you are using babel outside of a bundler like webpack, or on the CLI, babel-minify can be ran at the same time as other babel transforms, and therefore requiring minimal additional config. Babel-minify would also be able to use the same cache as the rest of the babel plugins, if you have caching enabled through for example babel-loader.

Originally, babel-minify (then babili) was created because there was no uglify-js version compatible with ES6 or newer, and babel already had a parser that supported the new syntax. Since then, terser has become a good alternative, and performs faster than babel-minify while still supporting ES6 (probably because it's not tied in to babel's transform pipeline). Due to this and the reasons you listed, terser would probably be the best option to choose now.

One possible exception would be if you use experimental syntax that has not yet been standardized as part of ECMAScript, but is supported in babel's parser (possibly with a plugin). In this case, babel-minify might prove to be beneficial.

like image 55
16patsle Avatar answered Sep 23 '22 18:09

16patsle