console.log([1, 2, 3].at(-1)) transpiles to 44k

Introduction

In recent discussions within the web development community, we've seen ongoing debates about JavaScript transpiling practices, particularly around the usage of ES5 versus ES6+ syntax. A striking example of this is the statement console.log([1, 2, 3].at(-1)), which transpiles to an astonishing 44,000 bytes in ES5 code when processed with tools like Babel.

The State of ES5 on the Web

In 2017, a groundbreaking article explored how web developers could deploy ES6+ while avoiding cumbersome transpilers that add unnecessary bloat. This liberation was particularly beneficial for those wanting to write in modern JavaScript without worrying about altering their production codebase heavily. However, JavaScript library authors, bound by stricter deployment considerations, found themselves needing to continue supporting ES5, due to the complexities surrounding compatibility.

Fast forward to today, and the JavaScript landscape has evolved significantly. Notably, IE11—the last mainstream browser requiring ES5—was officially deprioritized by Microsoft in 2022. This marked a pivotal moment for many businesses, as they could finally drop support for this aging browser version.

Current Practices and Cautions

Despite the advancements, many websites still ship transpiled ES5 code that is incompatible with IE11. This leads to substantial code ballooning from polyfills and other incompatibility measures, resulting in bloated bundles being downloaded by users but having no benefit due to browser limitations.

Both bundler and build tool configurations have been found to heavily influence the final output of JavaScript code. Most developers still use the default configurations, many of which advocate excluding node modules from transpilation—a practice that can lead to a cocktail of untranspiled ES6+ syntax co-mingling with ES5 helpers.

Unexpected Findings

A recent examination of popular websites revealed that 89% serve at least one JavaScript file containing untranspiled ES6+ syntax, and remarkably, 68% serve files with both ES5 helper code and untranspiled ES6. This outcome suggests that many sites inadvertently serve unnecessary and potentially problematic code, highlighting concerns about current best practices regarding JavaScript library transpilation and deployment.

The overall findings indicate that library authors should reconsider their need to transpile to ES5, given the prevalence of untranspiled ES6+ on the web. Today, fewer build tools default to ES5 transpilation, indicating a significant shift in development practices.

Recommendations for Developers

For developers, the critical takeaway is that they shouldn't rely solely on their build tools for cross-browser support, especially concerning ES5. Library authors should ensure compatibility with modern browsers instead of defaulting to outdated standards. Proper configuration of bundlers is essential to ensure a streamlined and efficient deployment process without unnecessary bloat.

To ensure a smooth workflow and optimal performance, web developers should aim to handle ES6+ deployments responsibly when dealing with external libraries or older code bases.

Keywords

• ES5
• ES6+
• Transpilation
• Babel
• Polyfills
• JavaScript
• Build tools
• Web Development

FAQ

Q: What is transpilation in JavaScript?
A: Transpilation in JavaScript refers to converting code written in a newer version of JavaScript (like ES6+) into an older version (like ES5) that may be supported by a wider range of browsers.

Q: Why is there concern over ES5 support?
A: The concern arises from the substantial bloat introduced by polyfills and helper code when modern JavaScript features are transpiled for compatibility with older browsers, leading to larger bundle sizes.

Q: How can developers optimize their JavaScript bundles?
A: Developers can optimize their bundles by configuring their build tools to target modern browsers effectively, avoiding unnecessary transpilation of dependencies that are not required.

Q: What tools are commonly used for transpilation?
A: Common tools for JavaScript transpilation include Babel, TypeScript, and Closure Compiler. Each has different capabilities and optimizations.

Q: Is it still necessary to support IE11?
A: As of 2022, IE11 is no longer officially supported by Microsoft, leading most businesses to drop support for it. Thus, supporting IE11 is increasingly unnecessary for modern web development.