Loading React + ReactDOM from cdn

[mschipperheyn]

Given that React and ReactDOM are so prevalent and therefore likely to exist in the browser cache, it seems to make sense to have an option to build the package with an option to to include React and ReactDOM statically in the HTML file.

It would make the initial load that much snappier.

Is this something that could be considered?

[gaearon]

I agree. There are currently reasons why we can’t easily do this (addons reach into React internals). But with React 16 this will no longer be a problem and I think we can reconsider offering this.

[chj-damon]

@gaearon have you offered this in the newest version of create-react-app?

[swyxio]

hi! just had the same idea too. also wanted to point out it maybe doesnt take much more effort than configuring babel: https://www.youtube.com/watch?v=2rhkgB8Cohc

edit: i meant webpack, leaving my mistake as dan responded to me below

[gaearon]

Not sure what this has to do with Babel.

have you offered this in the newest version of create-react-app?

No but I’m open to suggestions for how it should work! I think maybe we can do this automatically if we detect CDN links in the HTML? What do you think?

[czebe]

Just offer a way to customize webpack.
I believe these scripts should go into "externals".

[gaearon]

Nah, we're not going to allow to customize webpack :-) There are dozens of issues about this if you're wondering why.

[yvesgurcan]

Hello! I would love to contribute to create-react-app and this seems an easy enough project for me. I would be happy to put into practice @gaearon 's suggestion. Which files should I look at?

[andriijas]

I was thinking the way @Ayc0 used to implement vendors in #3145 could be reused for this and #3878 - Im currently working in a project where some resources are loaded via CDN statically in index.html and its far from optimal. Its pretty convenient to have one source of truth of your packages and dependencies - package.json - easier to know which versions you are using and to keep track of updates.

Anyway Im just getting started with #3878 lets see how it goes.

[Ayc0]

@andriijas I don't know if you can use the chunk plugin (or the new split chunk plugin) to replace a module by a cdn

the external field of webpack can do this I think
Maybe, we can add a field externals in the package.json that's gonna be read by webpack

[Ayc0]

https://github.com/mastilver/dynamic-cdn-webpack-plugin

[iansu]

That webpack plugin looks like a good option. Does someone want to try it out and submit a PR?

[swyxio]

giving it a shot. i think this could be an easy win.

@iansu - any thoughts on would this be a prod-only feature or both dev and prod?

[swyxio]

I have implemented this only for prod. as one might expect it shaves 30kb off the bundle size (aka react)

[chj-damon]

@sw-yx would you like to share your process that how you make it?