Are there any performance issues with inlining CSS rather than using "chunks"?

Question

Modern frameworks like Vue and React start with inline CSS inside individual components. For example, in a Vue single file component, we include all the Javascript, HTML, and CSS in one .vue file. There is usually a build step or some computation which compiles these changes into chunks, which are loaded into the page based on what components are visible to the user.

I can appreciate that this may be the most efficient way to compile CSS for multiple components and load it into a page.

My question relates primarily to performance. Suppose instead of compiling all of the component styles into chunks, React or Vue did sent this instead, when a component is rendered:

<div id="someComponent">
    <!-- My component HTML goes here -->
</div>
<style>
     /* Associated styles */
     #someComponent {
         color: red;
     }
</style>

That means instead of having a CSS chunk file, the styles are simply inlined and included beside the component they relate to on the live website.

I know this is messy, but my question is, are there any performance concerns with doing this? I would've thought this might actually be more performant, since loading a chunk requires an HTTP request, which obviously has an overhead, whereas this is included in a single HTTP request when the user opens the webpage.

Answer 1

For anyone wondering, although I wasn't able to do very extensive testing, there does seem to be some performance issues taking this approach. Also it leads to layout shifts (CLS) since the CSS is loaded at different times.

Good to avoid doing in general, as it seems to bring no discernible benefits. The approach I finally went with was to regex out all the inline component CSS and combine it into one large inline chunk of CSS, which cut out the HTTP request.