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-runtimeandbabel-transform-runtimeto 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
};Install
$ npm install --save-dev babel-preset-react-optimizeUsage
.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.