Improve production perf

[oliviertassinari]

What about using some babel plugin for the production build, like https://github.com/callemall/material-ui/blob/master/docs/src/.babelrc?

[mxstbr]

Haven't looked into that at all, sounds interesting though. Would love a PR!

[oliviertassinari]

Sorry, I'm already quite busy with an OSS projet.
I'm curiouse, why just adding one of the 4 plugins?

[mxstbr]

The rest of them don't make any sense for this boilerplate:

• transform-runtime transforms ES6 to ES5 client side, we transpile it on build already and send the ES5 version to the client.
• transform-react-constant-elements hoists all react elements to the outer most scope, but since we use modules we don't want that at all.
• transform-react-inline-elements no idea what "exploded react objects" are and what the benefit of having JSX as them is.

EDIT: I didn't know what I was talking about, see below

[oliviertassinari]

From my point of view, we need them.

• transform-runtime Externalise references to helpers and builtins. That meens it's reducing the output file by prevented helper function to be duplicated in each file.
• transform-react-constant-elements reduces call to React.createElement and the resulting allocations. More importantly, it tells React that the subtree hasn't changed so React can completely skip it when reconciling.
• transform-react-inline-elements it's preventing call to React.createElement by using a raw js object. This improve performances.

[mxstbr]

Ah I see, that was a total misunderstanding on my part then! I'll reopen the issue and fix them when I get the time. (or maybe somebody else has some time at their hand and wants to contribute?)

What are the cons of using these plugin, why isn't everybody using them?

[oliviertassinari]

What are the cons of using these plugin

Those plugins doesn't play well in a development environnement. That's their first drawbacks.
I have also noticed that transform-react-inline-elements increase the output build size.

why isn't everybody using them?

I guess it's because nobody is taking about them.

[mxstbr]

I'm still unsure what transform-runtime actually does. When I include it, it increases the output build size and throws a bunch of errors that the

module babel-runtime/helpers/jsx cannot be resolved

Why would I want to include babel-runtime/helpers/jsx in my build output?

[oliviertassinari]

Well, I'm joining your point, on some of my project transform-runtime increase the build size, on other it decrease it. Plus, I have noticed this issue with IE11 http://phabricator.babeljs.io/T6946.
I'm gonna close this issue. Thanks!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.