A Babel preset and plugins for optimizing React code.
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-runtimeandbabel-transform-runtimeto 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 };$ npm install --save-dev babel-preset-react-optimize.babelrc
{ "presets": ["es2015", "react"], "env": { "production": { "presets": ["react-optimize"] } } }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.