Wie extrahiere ich kritische (oberhalb des Falts) CSS von jedem Eintrag?

Question

Ich habe eine einfache mehrseitige App mit drei Seiten, meine webpack.config.jsentry wie folgt aussieht:

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

Jede Seite besteht aus mehreren Komponenten reagieren, von denen einige sichtbar above the fold auf den ersten machen, und einige davon sind nicht zu sehen.

Ich würde gerne deklarativ definieren, welche Komponenten für jede Seite/Eintrag "kritisch" (über dem Falz) sind, und dieses CSS in eine separate Datei extrahieren lassen. Etwas wie:

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

etwas ausgibt, wie:

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

Ich habe mit dem extract-text-webpack-plugin herumgespielt, aber kann nicht scheinen, einen Weg zu finden, es zu sagen, nur zu extrahieren spezifische CSS in der Kontext eines bestimmten Eintrags.

---

Wie kann ich bestimmte CSS-Datei-Inhalt extrahieren, wenn im Zusammenhang mit einem bestimmten Eintrag/Seite?

Answer 1

Ich bin in der gleichen Situation, unser Projekt ist groß genug und wir brauchen mehr als 20 verschiedene kritische CSS-Dateien. Ich habe einen Weg gefunden, um das Erzeugen von kritischem CSS schmerzloser zu machen. Ich verwende https://github.com/zgreen/postcss-critical-css, die das Erstellen verschiedener kritischer CSS-Dateien ermöglichen.

@critical crit.css { 
    .head { 
     background: red; 
    } 

    .head .logo { 
     display: block 
    } 
} 

@critical v2.css { 
    .head.v2 { 
     background: green; 
    } 
} 

.main { 
    color: #333; 
} 

.footer { 
    background: black; 
} 

Postcss kritische-CSS wird 3 Dateien erzeugen - meine CSS-Datei (mit oder ohne kritische Stile) und 2 kritische CSS-Dateien - v2.css und

Hoffnung crit.css dies wird Ihnen helfen!