[Feature Suggestion] Publish react also as ES2015 code #10164
Comments
|
This sounds like a duplicate of #10021. But it is not clear to me which performance benefits you are expecting in particular. If you could expand in that issue that would help. |
|
#10021 Is about shipping react with es2015 modules but ES5 syntax, for tree shaking. This issue is about shipping react also with es2015, so the consumer will be able to transpile it using https://github.com/babel/babel-preset-env as part of his project. |
|
Ah, I see what you mean now.
Can you point me to related benchmarks? As far as I’m aware ES6 features are still slower in the mainstream browsers than ES5 counterparts. Additionally React 16 won’t really be using either classes or arrow functions in its code, so I’m not convinced this makes a lot of difference for debugging. |
|
I'd like to add my vote for this, just cause I've been playing around with in-browser ES modules today. Currently, on the Installation page you can download a HTML file with this code in it: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>It would be cool if you could do instead: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div id="root"></div>
<script type="module">
import React from 'https://unpkg.com/react@latest/dist/react.module.js'
import ReactDOM from 'https://unpkg.com/react-dom@latest/dist/react-dom.module.js'
ReactDOM.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('root')
);
</script>
</body>
</html>Not much you can do about the JSX but still, might be interesting to someone! |
|
I think this issue is about slightly different thing. The one you're looking for is #10021. |
|
I... don't think it is. I don't want untranspiled source, I want a bundle, flattened like normal, to have ES modules exports. P.s. I thought you were on holiday Dan 😉 |
|
I think it's the other way around :-) #10021 is about modules. This issue is about untranspiled source: #10164 (comment). Going back to vacation! |
My guess is, he’s talking about the over-the-wire bundle size vs runtime perf.
This is actually really important to this topic. I ran some tests this weekend where I swapped out the Closure compiler ES5 target for the ES2015 one, but, because Closure’s ES2015 is not anywhere as efficient as the insane magic that is its ES5, the bundle size actually went up. I also tried babel-minify with similar results. Uglify doesn’t support ES2015. On most projects, this isn’t the case, and you can see up to 50% payload reduction because you don’t have all the Babel helpers, large transpiled results, etc. But for React specifically it’s not a win because React’s codebase uses so little of the expensive (size-wise after transpilation) ES2015 syntax. While the module discussion in the other topic might be good to keep alive, I think we can close this one out for now. Due to the lack of anything approaching with the current efficiency of Closure ES5, React can’t currently get any wins from delivering in ES2015 — as it’s mostly ES5 to begin with! |
That's my impression too. |
|
@gaearon |
|
Tiny benchmarks like this are not representative of real code performance. https://mrale.ph/blog/2014/12/24/array-length-caching.html If you can prepare a reproducing case that involves a real (even a small) React app and also demonstrates a stark difference it would be interesting. |
Do you want to request a feature or report a bug?
feature
What is the current behavior?
React is published to NPM only as ES5 code
What is the expected behavior?
Publish react also in es2015, with es2015 entry point in the package.json
Motivation: Performance. leverage the targeted client native ES features
Its part of the angular 4 package format
https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.jt2mvxhyrshv
http://2ality.com/2017/04/setting-up-multi-platform-packages.html
The text was updated successfully, but these errors were encountered: