search

MadeInHaus / react-starter

A client-side SPA starter bundled with React, Redux, CSS Modules, React Router 4, and Webpack 4
MIT License
9 stars 2 forks source link

Inline CSS Strategy #7 #19

Closed chrisjcodes closed 6 years ago

chrisjcodes commented 6 years ago

Were using the oneOf loader for scss in production. It looks first for any imported scss files with the query of inline i.e. import './Critical.scss?inline' and inlines these in the head. All other styles are extracted.

This works but after implementing seems useless as the extract text plugin creates a css file that has to load synchronously before the rest of the dom loads, which means the bundle can never load before the stylesheet.

stevescavo commented 6 years ago

This isn't the right approach IMO. If we're going to implement critical css, it should be rendered server-side. In our case, it should be injected into index.html. Something like or similar to https://www.npmjs.com/package/webpack-plugin-critical.

Closing now.