13

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?
szegheo
  • 4,175
  • 4
  • 31
  • 35
  • Please take the [tour](https://stackoverflow.com/tour) and learn [how to ask a good question](https://stackoverflow.com/help/how-to-ask). "Not all questions work well in our format. Avoid questions that are primarily opinion-based, or that are likely to generate discussion rather than answers." – Quentin Oct 05 '18 at 09:07
  • @Quentin Sorry for that. I've just edited it to be more clear. Hope it's ok now. Thank you! – szegheo Oct 05 '18 at 11:22
  • Great question, I just asked the same here https://github.com/webpack/webpack/issues/7923 maybe webpack can explain why they prefer terser. Judging by the commit activity https://github.com/babel/minify/graphs/commit-activity and https://github.com/terser-js/terser/graphs/commit-activity I feel like using terser, seems more active – Fabio Crisci Oct 19 '18 at 03:14

1 Answers1

16

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.

16patsle
  • 513
  • 7
  • 12