DEV Community

Discussion on: How we reduced our initial JS/CSS size by 67%

Collapse
 
daniel15 profile image
Daniel Lo Nigro

One small suggestion I have is to load React from a CDN, and put it in a separate bundle otherwise (as a fallback). React is very popular, and loading it from a CDN means that it's more likely to be cached - if your users have already hit another site that used the same version of React, from the same CDN.

You're likely not upgrading your React version as often as you're upgrading your other vendor packages, which is why React should be separate. Otherwise, whenever you change any of the other vendor packages, users will need to download the whole of React again.

Collapse
 
goenning profile image
Guilherme Oenning

Great suggestion, thank you! The advantages are clear, but what about the disadvantages? Do you know any? I wonder why this is not more popular on apps using React.

Collapse
 
pavanmehta profile image
Pavan Maheshwari

Won't the other vendor packages expect react as a peer dependency? For example react routerdom

Thread Thread
 
goenning profile image
Guilherme Oenning

You mean the common bundle? It does depend on vendor bundle (which contains React and reactdom), which is why on the html we import the vendor bundle before the common

Thread Thread
 
ajayposhak profile image
Ajay Poshak • Edited

And what about Server Side rendering then? While doing SSR, I need react's renderToString function on server so I have to install react anyways. I am curious to know how did you do it?

Thread Thread
 
goenning profile image
Guilherme Oenning

I don’t have Node.js on the server side, so SSR is very hard to me. So I’m planning to use puppeteer to do prerender for crawlers.

Thread Thread
 
daniel15 profile image
Daniel Lo Nigro

You don't necessarily need Node.js for server side rendering. It's likely your preferred server side language has some JavaScript engine you could use.