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.