I recently upgraded to Gatsby v4 and in so doing re-created the site from scratch using a generic starter.

The redesign is welcome because the old one was causing me a lot of headaches from the constant compatibility warnings.

However, the new version also seems to perform much worse, in that pages don’t load completely on the first try; it seems you have to refresh the page every time to get all the CSS to render properly. I’m not sure what the cause is, but rest assured I will find and crush it.

The warning I see during the build process is: Serializing big strings (319kiB) impacts deserialization performance (consider using Buffer instead and decode when needed).

This would seem to be a warning generated by WebPack, and the plugin mini-css-extract-plugin is likely to blame. There’s too much CSS! And that’s why the page is not loading CSS correctly.

Or maybe not? After troubleshooting for a couple weeks I still can’t figure out the root cause of the issue. So I instead have removed a lot of Fluent UI components from my pages, and now the issue does not seem to be occurring.

Update on 12/3/21 After completely re-farking the CSS I was able to resolve the issue, but I still don’t know the root cause.