How to extract critical (above fold) CSS from each record?

Question

I have a simple multi-page application with three pages, my webpack.config.js entry looks like this:

 { entry: { a: 'pages/a.js', b: 'pages/b.js', c: 'pages/c.js', } } 

Each page consists of several React components, some of which are visible from above on the first render, and some of them are not displayed.

I would like to declaratively determine which components are “critical” (above) for each page / post, and this CSS is extracted to a separate file. Something like:

 { a: ['compononents/button/style.css', ...], b: ['compononents/title/style.css', ...], c: ['compononents/header/style.css', ...] } 

output of something like:

 - dist/a.critical.css - dist/b.critical.css - dist/c.critical.css 

I play with extract-text-webpack-plugin , but it seems I can’t find a way to tell it to only extract specific CSS in the context of a particular post.

---

How can I extract the specific content of a CSS file if in the context of a particular post / page?

Answer 1

I am in the same situation, our project is large enough, and we need more than 20 different critical css files. I found a way to make critical CSS more painless. I use https://github.com/zgreen/postcss-critical-css , which allow you to create different critical css files.

 @critical crit.css { .head { background: red; } .head .logo { display: block } } @critical v2.css { .head.v2 { background: green; } } .main { color: #333; } .footer { background: black; } 

Postcss-critical-css will generate 3 files - my css file (with or without critical styles) and 2 critical css files - v2.css and crit.css

Hope this helps you!