Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thejameskyle/babel-react-optimize
:rocket: A Babel preset and plugins for optimizing React code.
https://github.com/thejameskyle/babel-react-optimize
Last synced: 3 months ago
JSON representation
:rocket: A Babel preset and plugins for optimizing React code.
- Host: GitHub
- URL: https://github.com/thejameskyle/babel-react-optimize
- Owner: jamiebuilds
- License: mit
- Created: 2016-04-16T20:19:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-06T09:10:01.000Z (over 7 years ago)
- Last Synced: 2024-08-01T02:35:01.477Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 18.6 KB
- Stars: 1,678
- Watchers: 14
- Forks: 29
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-babel - React Optimize - A Babel preset and plugins for optimizing React code. (Presets / Alternative Programming Paradigms)
README
# Babel React Optimize
A Babel preset and plugins for optimizing React code.
## Optimizations
### [`transform-react-constant-elements`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-constant-elements)
**Input:**
```js
class MyComponent extends React.Component {
render() {
return (
Hello World
);
}
}
```
**Output:**
```js
var _ref = Hello World;
class MyComponent extends React.Component {
render() {
return (
{_ref}
);
}
}
```
### [`transform-react-inline-elements`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements)
**Input:**
```js
class MyComponent extends React.Component {
render() {
return (
Hello World
);
}
}
```
**Output:**
```js
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`](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types)
**Input:**
```js
class MyComponent extends React.Component {
static propTypes = {
className: React.PropTypes.string.isRequired
};
render() {
return (
Hello World
);
}
}
```
**Output:**
```js
class MyComponent extends React.Component {
render() {
return (
Hello World
);
}
}
```
### [`transform-react-pure-class-to-function`](https://github.com/thejameskyle/babel-react-optimize/tree/master/packages/babel-plugin-transform-react-pure-class-to-function)
**Input:**
```js
class MyComponent extends React.Component {
static propTypes = {
className: React.PropTypes.string.isRequired
};
render() {
return (
Hello World
);
}
}
```
**Output:**
```js
function MyComponent(props) {
return (
Hello World
);
}
MyComponent.propTypes = {
className: React.PropTypes.string.isRequired
};
```
## Install
```sh
$ npm install --save-dev babel-preset-react-optimize
```
## Usage
`.babelrc`
```json
{
"presets": ["es2015", "react"],
"env": {
"production": {
"presets": ["react-optimize"]
}
}
}
```
## Benchmarks
We haven't yet much benchmark.
But this [post](https://medium.com/doctolib-engineering/improve-react-performance-with-babel-16f1becfaa25)
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.