Skip to content

Mention babel-react-optimize #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kurtextrem wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Mention babel-react-optimize #14

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c35fcfa
Mention `babel-react-optimize`
kurtextrem Jun 20, 2018
46e06ff
Add emojis
kurtextrem Jun 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,30 @@ React is a library for building user interfaces. [npm package](https://www.npmjs

React doesn’t perform `propTypes` checks in production, but the `propTypes` declarations still occupy a part of the bundle. Use [`babel-plugin-transform-react-remove-prop-types`](https://www.npmjs.com/package/babel-plugin-transform-react-remove-prop-types) to remove them from during building.

### A word on [`babel-react-optimize`](https://github.com/jamiebuilds/babel-react-optimize)

> ❌ Not safe to use / Why ↓ / Added by [@kurtextrem](https://twitter.com/kurtextrem) / [Join the discussion](https://github.com/GoogleChromeLabs/webpack-libs-optimizations/issues/9)

You might or might not have heard about [`babel-react-optimize`](https://github.com/jamiebuilds/babel-react-optimize), it offers bundeled optimizations for React (and alternatives).
However, we do not recommend to use the bundle, see [here](https://github.com/facebook/create-react-app/issues/553#issuecomment-359196326) for why. TL;DR: It hurts TTI. In the linked comment, a React Dev elaborates this and explains why those are disabled in `create-react-app`.

### [`transform-react-pure-class-to-function`](https://github.com/jamiebuilds/babel-react-optimize/tree/master/packages/babel-plugin-transform-react-pure-class-to-function)

> ✅ Safe to use by default / How to enable is ↓ / Added by [@kurtextrem](https://twitter.com/kurtextrem)

However, what we do recommend is: [`transform-react-pure-class-to-function`](https://github.com/jamiebuilds/babel-react-optimize/tree/master/packages/babel-plugin-transform-react-pure-class-to-function) which saves quite some bytes.

To install, add it to your Babel config:

```json
// .babelrc
{
"plugins": [
"babel-plugin-transform-react-pure-class-to-function"
]
}
```

### Replace with Preact

> ⚠ Use with caution / [How to migrate](https://preactjs.com/guide/switching-to-preact) / Added by [@iamakulov](https://twitter.com/iamakulov)
Expand Down