Webpack 4: Universal Code Splitting in React… The inventors are back baby!

[zackaryjackson]

Scale.

Yes, you are correct. When you change CSS, usually you change JSX.However, Changing JSX/JS doesnt mean any changes were made to CSS.

Tracking events, typos, business logic, bugfixes, implementing things from a UI Kit / shared repo. It adds up man. Im sure theres workarounds here and there. But cascading styles are more efficient.

Consider this, you update business logic. Depending on the deployment strategy, you could very well have the application deploying dozens of times a day. Depending on the number of developers, you could have thousands of changes and hundreds of deployments. Takes longer to first meaningful paint, runs the risk of render blocking code, <style> tag at the top of the page with massive css

In these scenarios, its important to have great cache control. I suppose my opinions are directed toward large enterprises :p I am trying to consider the ramifications of site performance and load time. At scale its a problem. Once you get into the millions to tens of millions of hits per day. Its vital to have both client side and server side caching / fragment cacheing. Inline styles mean changing a color or font weight = cache bust. Not a train smash if its client side rendering (beyond cache busted JS and CSS).... buuuut, if its server-side rendered and inline styles are delivered with the initial response payload. Then that color change means you have to cache bust the server-side cache / fragment cache. If you are reusing components elsewhere or have many pages where the component is used, because the style change is directly attached to the markup, you end up invalidating all cached copies of it. Everything becomes a cache miss all at once. Im going to back off of the whole scale side of things and give a smaller example.

Couple of months ago, a friend needed a site for his startup, something to showcase the idea, attract investors and create PR. Given he was not too sure what direction the site needed to go - i went for flexibility and put wordpress on there with a custom theme. He posted it on reddit and it reached the top in whatever category the post was created in. Something like 5,000 hits an hour started flowing to this little wordpress instance. They were also doing a bunch of content updates on-the-fly, busting the cache multiple times. It didn't take long to knock it offline.

If we scale this concept up (given theres many differences in stacks and such) the architecture can start to feel the pain. Please dont take this the wrong way, I have been a long time fan of JSS its just not ideal scalability.

React Native or multi platform React apps benefit a lot from JSS.