Skip to content

🚀 A Babel preset and plugins for optimizing React code.

License

Notifications You must be signed in to change notification settings

jamiebuilds/babel-react-optimize

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Babel React Optimize

A Babel preset and plugins for optimizing React code.

Optimizations

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>
    );
  }
}

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.

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>
    );
  }
}

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
};

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.

About

🚀 A Babel preset and plugins for optimizing React code.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •