babel-minify or terser over uglify-js

Exploring ES6+ (modern JavaScript) is a new adventure for me, and I've discovered that in order to use it in browsers, tools like babel-minify or terser are necessary. It's interesting to note that Babili was initially thought to be a separate tool but is actually just the old name of Babel-Minify.

When it comes to browser polyfills, options such as @babel/polyfill and Polyfill.io offer efficient solutions for sending compact and swift code to modern browsers, minimizing the need for additional polyfills. The approach involves quickly testing the browser, dynamically loading necessary polyfills, and then running our main script. This makes employing these contemporary technologies highly practical.

My current predicament revolves around selecting either babel-minify or terser.

The decision by the Webpack team to transition to terser in the forthcoming Webpack 5 holds weight.
According to a comparison table shared by the Babel team, terser demonstrates superior speed.
Additionally, documentation suggests that terser is an offshoot of uglify-es, which enjoyed widespread adoption previously.

All signs seem to point towards choosing terser.

However, it's worth acknowledging that Babel continues to play a crucial role in transformation processes and offers a range of beneficial functionalities. With a longstanding presence in the field (despite Babili/babel-minify being initially released on August 26, 2016, making uglify the older option), Babel boasts a robust developer community on GitHub that ensures prompt bug detection and resolution. These factors instill more confidence in their ability to deliver production-ready outputs. Nevertheless, I have yet to come across any literature highlighting the advantages of babel-minify over terser.

Questions:

While my inclination leans towards terser due to its promising nature and aforementioned reasons, I still ponder:

  • In what scenarios would opting for babel-minify instead of terser be favorable?
  • Are there any distinct benefits to utilizing all functionalities through Babel packages?
javascriptwebpackbabeljsuglifyjsbabel-polyfill

Answer №1

When deciding between using terser or babel-minify, the choice may not make a significant impact in most situations. However, one advantage of utilizing babel-minify is its seamless integration with the overall babel ecosystem. If you are incorporating babel into your workflow outside of a bundler like webpack or on the command line interface, running babel-minify alongside other babel transformations requires minimal additional configuration. Additionally, babel-minify can leverage the same cache as other babel plugins if caching is enabled through tools such as babel-loader.

The inception of babel-minify (formerly known as babili) stemmed from the absence of an ES6-compatible version of uglify-js, coupled with babel's existing support for new syntax parsing. Nevertheless, terser has emerged as a viable alternative that offers faster performance than babel-minify while still accommodating ES6 standards, likely due to its independence from babel's transformation process. Given these reasons, terser currently stands out as the preferred option.

An exception where babel-minify might be advantageous is when experimenting with syntax that has not yet been standardized in ECMAScript but is compatible with babel's parser, potentially with the use of a plugin. In this scenario, babel-minify could prove beneficial despite the prevailing advantages of terser.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering Vue linting errors related to the defineEmits function

I am encountering an issue with the linting of my Vue SPA. I am using the defineEmits function from the script setup syntactic sugar (https://v3.vuejs.org/api/sfc-script-setup.html). The error messages are perplexing, and I am seeking assistance on how to ...

javascripttypescriptvue.jseslintvue-composition-api

Is it possible to retrieve an array using axios?

Currently, I am exploring computed properties in Vue.js. One of the computed methods I am working on involves making a request to an axios API to retrieve an array after applying some logic within the promise. computed: { filteredTrips: function () { ...

javascriptvue.jsvuejs2axiosvue-resource

Issue with Ng-Messages not functioning properly due to a custom ng-Include directive lacking a child scope

I have created a custom directive called lobInclude, which is similar to ngInclude but with no isolated scope: .directive("lobInclude", ["$templateRequest", "$compile", function($templateRequest, $compile) { return { restrict: "A", ...

javascriptangularjsangularjs-directiveangular-directiveng-messages

How can we prevent Material-UI and Redux-form from re-rendering when an option is clicked in the select input?

I am facing an issue with rendering options dynamically. Whenever I click on the select or the options, the component re-renders and changes the options. As a result, I need to click twice to select an option in the dropdown. This re-rendering is happening ...

javascriptreactjsreduxmaterial-uiredux-form

Issue with uncaught exceptions in promise rejection test

I am experiencing an issue with the following code: function foo(){ bar().catch(function(){ //do stuff } } function bar(){ return promiseReturner().then( function(result){ if(_.isEmpty(result)){ throw "Result is empty"; ...

javascriptangularjstestingpromisekarma-jasmine

Creating a reverse progress bar in HTML and Javascript that incorporates a countdown date

I'm struggling to find a way to create a progress bar that empties as it gets closer to the countdown date. I came across two different examples that I think could be merged, but I'm not sure how to do it: Countdown - https://www.jqueryscript. ...

javascriptdateprogress-barreversecountdown

What is the best way to add bold formatting to text enclosed in parentheses using javascript/jquery?

How can I use jQuery or JavaScript to make the text inside parentheses bold? For example: "what is your Age (in Year)." I need assistance in making the text within parentheses bold using either jQuery or JavaScript. Can someone help me with this task? ...

javascriptjqueryhtmlstring

Creating an object key using a passed literal argument in TypeScript

Can the following scenario be achieved? Given an argument, how can we identify the object key and access it? Any potential solutions? async function checkKey(arg:'key1'|'key2'){ // fetchResult returns an object with either {key1:&apo ...

javascripttypescriptobject

Script tag for Next.js reloading functionality

I have been facing a challenge while trying to integrate third-party commenting scripts like (disqus, remark42, hyvor) into my next.js application. The issue I encountered is that the script only loads on the initial page load. Subsequently, I need to refr ...

javascriptnext.jsdisqusremark42

"Placing drop-down animations in just the right spot

I'm currently working on adjusting the dropdown behavior for thumbnails when hovering over them. I want the drop-down to appear beneath the 'Caption Title' instead of above the image, but so far my CSS adjustments haven't been successfu ...

javascriptjqueryhtmlcss

Ways to detect scrolling activity on the v-data-table module?

Are you looking for a way to detect scrolling events on the v-data-table component in Vuetify framework? I am referring to the scenario where the table has a fixed height, causing the table body to scroll. <v-data-table fixed-header :height=400 : ...

javascriptvue.jsvuetify.jsv-data-table

Error in HTML: Text variable is not displaying the number value

Currently, I am facing a challenge with my code. I have a variable named "Timer" that I want to increment by one and then display the number. However, I am unable to see the "Test Successful!" message displayed on the screen. Surprisingly, there are no e ...

javascriptvisual-studio-code

Tips on arranging an array based on dates and data in JavaScript?

I have an array with dates and other data that I need to sort based on the dates. I'm unsure of how to go about this. Can someone please assist me? Here is the array in question: 0:{_id: "01-11-2017", CommentCount: 221, Likecount: 141, Followcount: ...

javascriptarrays

Leverage React.js by incorporating a Header-Imported JavaScript Library

I recently developed a React.js web application and am exploring the use of Amplitude Analytics, which provides a Javascript SDK found here. According to the guidelines, I need to include a <script></script> within the <head></head> ...

javascripthtmlreactjsnpmamplitude-analytics

Plugin refresh after callback

I have a webpage that features a row of buttons at the top, followed by some content below. Whenever one of the buttons is clicked, the content is updated using UpdatePanels. Within this content, I am attempting to incorporate the royal slider plugin, wh ...

c#javascriptjqueryasp.netupdatepanel

Switching out the background image with a higher resolution one specifically for users with retina devices

I'm trying to create my very first website that is retina ready, but I've run into an issue when it comes to updating images to higher resolutions in CSS. I'm unsure how to go about having a standard image as the background and then switchin ...

javascripthtmlcssretina-display

Is it better to import and use useState and useEffect, or is it acceptable to utilize React.useState and React.useEffect instead?

When I'm implementing hooks for state, effect, context, etc, this is my usual approach: import React, { useState, useEffect, useContext } from 'react'; However, I recently discovered that the following also works perfectly fine: import Re ...

javascriptreactjsecmascript-6

Combining the total of numerous inputs that are multiplied by a specific value all at once

Hey, I've been working on a project with a table and an input field with costs using jQuery. You can check out This Fiddle for reference. $( ".total" ).change(function() { let i = 1; var input001 = document.getElementsByName(i)[0]; var ...

javascriptphpjqueryhtml

What is the procedure for selecting an element based on its child containing specifically filtered text?

Imagine a webpage with the following elements: <div data-search="type1"> any HTML <!-- .click is a child of any level --> <span class="click" data-source="page1.html">blue</span> <!-- let's call it "click1 ...

javascriptjqueryhtmlajaxregex

"Executing the command 'npm run dev' is successful, however, the command 'next dev' does not yield the expected result

Trying out Next for the first time using npx create-next-app, but running into issues with the scripts. While npm run dev works without any problems, executing next dev gives me an error saying zsh: command not found: next. Any idea why this is happening? ...

javascriptreactjsnpmnext.js