dynamic component imports should bundle styling in a separate below-the-fold css file

[hallatore]

Goals

1. Reduce render blocking css for components that are lazy loaded with dynamic(...)
2. Make it easier to choose which components should generate render blocking styling, and which styling can be lazy loaded

Background

Currently you can import components dynamically, forcing next to create a separate js-chunk and lazy load the component.
But the styling still gets rendered in the main page css file that is render blocking.

This causes performance issues when the css gets big, with no way to tell next which parts can be loaded after page load.

Proposal

When importing a component using dynamic, the styling for that component and children could end up in a separat below-the-fold css file that's not render blocking.

const DynamicFooter = dynamic(() => import('../components/footer'), {
  ssr: false,
})

// ...
<DynamicFooter />
// ...

Today the styling inside DynamicFooter is bundled with the main render-blocking css file.
dynamic is already an established tool for lazy loading components. So it would be natural that the styling for that components also get loaded below the fold.

And we would avoid long pages having poor page speed because of poor TBT (Total blocking time) score.