Babel React Optimize

A Babel preset and plugins for optimizing React code.

Optimizations

transform-react-constant-elements

Input:

class MyComponent extends React.Component {
  render() {
    return (
      <div className={this.props.className}>
        <span>Hello World</span>
      </div>
    );
  }
}

Output:

var _ref = <span>Hello World</span>;

class MyComponent extends React.Component {
  render() {
    return (
      <div className={this.props.className}>
        {_ref}
      </div>
    );
  }
}

transform-react-inline-elements

Input:

class MyComponent extends React.Component {
  render() {
    return (
      <div className={this.props.className}>
        <span>Hello World</span>
      </div>
    );
  }
}

Output:

class MyComponent extends React.Component {
  render() {
    return (
      _jsx('div', { className: this.props.className }, void 0,
        _jsx('span', {}, void 0, 'Hello World')
      )
    );
  }
}

Note: You should use this with babel-runtime and babel-transform-runtime to avoid duplicating the helper code in every file.

transform-react-remove-prop-types

Input:

class MyComponent extends React.Component {
  static propTypes = {
    className: React.PropTypes.string.isRequired
  };

  render() {
    return (
      <div className={this.props.className}>
        <span>Hello World</span>
      </div>
    );
  }
}

Output:

class MyComponent extends React.Component {
  render() {
    return (
      <div className={this.props.className}>
        <span>Hello World</span>
      </div>
    );
  }
}

transform-react-pure-class-to-function

Input:

class MyComponent extends React.Component {
  static propTypes = {
    className: React.PropTypes.string.isRequired
  };

  render() {
    return (
      <div className={this.props.className}>
        <span>Hello World</span>
      </div>
    );
  }
}

Output:

function MyComponent(props) {
  return (
    <div className={props.className}>
      <span>Hello World</span>
    </div>
  );
}

MyComponent.propTypes = {
  className: React.PropTypes.string.isRequired
};

transform-react-router-optimize

The react-router guides mention a technique to reduce bundle size by only including neccessary parts of the react-router lib.

Read the guide here.

This plugin will do the transformation automatically for you.

Input:

import { Link, Route, Router } from 'react-router'

Output:

import Link from 'react-router/lib/Link'
import Route from 'react-router/lib/Route'
import Router from 'react-router/lib/Router'

Install

$ npm install --save-dev babel-preset-react-optimize

Usage

.babelrc

{
  "presets": ["es2015", "react"],
  "env": {
    "production": {
      "presets": ["react-optimize"]
    }
  }
}

Benchmarks

We haven't yet much benchmark. But this post can give you an idea of what you can win in real life. Notice that the win depends a lot on how you are using the React API.