Avoid Heavy Babel Transformations by (Sometimes) Not Writing Modern JavaScript

Babel is indispensable for modern JavaScript development, bridging the gap between cutting-edge features and browser compatibility. However, Babel's transformations, while powerful, can sometimes lead to unexpectedly large and complex output. This article explores scenarios where a more traditional JavaScript approach might yield smaller, more efficient code, minimizing the burden on users' browsers.

We'll use Babel's online REPL to illustrate these points, targeting browsers lacking ES2015 support. The focus isn't on "old vs. new," but on optimizing for the best implementation—achieving functionality with minimal build process overhead.

Optimizing for...of Loops

The for...of loop, while elegant, can produce surprisingly large Babel output, especially when dealing with functions returning iterables of unknown type. A simple for...of loop over an array:

function getList() {
  return [1, 2, 3];
}

for (let value of getList()) {
  console.log(value);
}

might inflate to 1.8kb after Babel processing due to its need to handle various iterable types. For arrays, a traditional for loop offers a significantly smaller footprint and retains loop control features like break and continue.

function getList() {
  return [1, 2, 3];
}

for (var i = 0; i 
<p>Alternatively, a polyfilled <code>forEach</code> can also be a good solution.</p>
<h3 id="Reducing-Bloat-from-Array-Spread-Syntax">Reducing Bloat from Array Spread Syntax</h3>
<p>The spread operator (<code>...</code>) provides concise array manipulation, but Babel's handling can introduce significant overhead when the input's type is uncertain.  Consider this example:</p>
<pre class="brush:php;toolbar:false">function getList() {
  return [4, 5, 6];
}

console.log([1, 2, 3, ...getList()]);

Babel might generate over 1.3kb of code. Array.concat() provides a more compact alternative:

function getList() {
  return [4, 5, 6];
}

console.log([1, 2, 3].concat(getList()));

NodeList Iteration

Looping over a NodeList often involves spreading it into an array for forEach compatibility. However, this can lead to bloated output. Using Array.prototype.slice.call() offers a more efficient approach:

[].slice.call(document.querySelectorAll('.my-class')).forEach(function(node) {
  // do something
});

Default Parameters and @babel/preset-env's Loose Mode

While default parameters enhance code readability, Babel's transformation can be verbose. @babel/preset-env's loose mode can reduce output size but introduces potential semantic compromises. A simple check for undefined offers a more direct, albeit less self-documenting, alternative:

function getName(name) {
  name = name || "my friend";
  return `Hello, ${name}!`;
}

Async/Await and Promise API

Async/await simplifies asynchronous operations, but Babel's default transformation (using generators and regenerator-runtime) can result in substantial code size. While plugins like babel-plugin-transform-async-to-promises can mitigate this, directly using the Promise API provides a more predictable and often smaller output:

function fetchSomething(url) {
  return fetch(url).then(response => response.json());
}

Class Syntax and Pseudoclassical Approach

ES2015 classes offer syntactic sugar for prototypal inheritance. However, Babel's transpilation can be extensive. For simpler inheritance scenarios, a pseudoclassical approach might suffice:

function Robot(name) {
  this.name = name;
  this.speak = function() {
    console.log(`I'm ${this.name}!`);
  };
}

Strategic Considerations

The choice between modern and traditional approaches depends on factors like target browser support and build process optimization. Strategies like differential serving can help deliver optimized code to users needing only ES2015 support.

The key takeaway is to be mindful of Babel's output. By occasionally inspecting the transpiled code, developers can make informed decisions, choosing the most efficient approach for each scenario, thereby improving application performance and user experience.

The above is the detailed content of Avoid Heavy Babel Transformations by (Sometimes) Not Writing Modern JavaScript. For more information, please follow other related articles on the PHP Chinese website!