@babel/helper-annotate-as-pure

What is @babel/helper-annotate-as-pure?

The @babel/helper-annotate-as-pure npm package is a utility within the Babel ecosystem designed to annotate call expressions with a /*#__PURE__*/ comment. This comment hints to JavaScript bundlers and minifiers, such as Terser, that the function call is pure. A pure function call's result can be safely removed if its result is not used, enabling more efficient final bundles by removing unused code.

What are @babel/helper-annotate-as-pure's main functionalities?

Annotating a call expression as pure

This feature allows developers to mark specific call expressions as pure, enabling potential removal during the minification process if the result of the call is unused. This is particularly useful for library authors who want to ensure their library's unused parts can be tree-shaken in consumer applications.

import * as t from '@babel/types';
import annotateAsPure from '@babel/helper-annotate-as-pure';

const callExpression = t.callExpression(t.identifier('myFunction'), []);
annotateAsPure(callExpression);
// The callExpression node is now annotated with a /*#__PURE__*/ comment.

Other packages similar to @babel/helper-annotate-as-pure

babel-plugin-annotate-pure-calls

Similar to @babel/helper-annotate-as-pure, this package provides a Babel plugin to automatically annotate call expressions and new expressions with /*#__PURE__*/ comments. The key difference is that it operates at the plugin level, automatically applying the annotations across your codebase, rather than requiring manual annotation of each call.

uglifyjs-webpack-plugin

While not a direct alternative, uglifyjs-webpack-plugin interfaces with UglifyJS to minify JavaScript bundles in Webpack projects. It can take advantage of the pure annotations added by @babel/helper-annotate-as-pure to perform tree shaking and dead code elimination, showcasing how such annotations can be utilized in the minification process.

README

@babel/helper-annotate-as-pure

API

declare export default annotateAsPure(nodeOrPath: Node | NodePath);

Usage

import traverse from "@babel/traverse";
import annotateAsPure from "@babel/helper-annotate-as-pure";

// ...

traverse(file, {
  CallExpression(path) {
    annotateAsPure(path);
  },
});

Caveat with UglifyJS pre v3.1.0

@babel/helper-annotate-as-pure will append any existing leading comments to the #__PURE__ annotation. Versions of UglifyJS prior to v3.1.0 will ignore these annotations, as they only check the last leading comment for the annotation.

For example, using the Usage snippet above:

In

const four = /* foo */ add(2, 2);

Out

const four = /* #__PURE__ */ /* foo */ add(2, 2);