प्रत्येक प्रविष्टि से महत्वपूर्ण (गुना के ऊपर) सीएसएस निकालने के लिए कैसे?

Question

मैं तीन पृष्ठों के साथ एक सरल बहु-पृष्ठ ऐप्लिकेशन है, मेरी webpack.config.jsentry लगता है:

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

प्रत्येक पृष्ठ कई घटकों, जिनमें से कुछ दिखाई पहली पर ऊपरी भाग की प्रस्तुत करना हैं प्रतिक्रिया के होते हैं, और जिनमें से कुछ दृष्टिकोण से बाहर हैं।

मैं एलान के तौर पर परिभाषित करने के लिए जो घटकों प्रत्येक पृष्ठ/प्रवेश के लिए 'गंभीर' (ऊपरी भाग की) कर रहे हैं, और कहा कि सीएसएस एक अलग फ़ाइल में निकाली गई राशि चाहते हैं। कुछ की तरह:

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

की तरह कुछ outputting:

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

मैं गया है extract-text-webpack-plugin के साथ चारों ओर खेल रहा है, लेकिन एक तरह से करने के लिए यह बताने के लिए खोजने के लिए नहीं कर पा रहे केवल में विशिष्ट सीएसएस निकालने एक विशिष्ट प्रविष्टि का संदर्भ।

---

मैं कैसे जब एक विशिष्ट प्रविष्टि/पृष्ठ के संदर्भ में विशिष्ट सीएसएस फ़ाइल सामग्री निकाल सकते हैं?

Answer 1

मैं एक ही स्थिति में हूँ, हमारे परियोजना काफी बड़ा है और हम 20 से अधिक विभिन्न महत्वपूर्ण सीएसएस फ़ाइलों की जरूरत है। मुझे महत्वपूर्ण सीएसएस को अधिक दर्द रहित बनाने का एक तरीका मिला। मैं https://github.com/zgreen/postcss-critical-css का उपयोग कर रहा हूं जो विभिन्न महत्वपूर्ण सीएसएस फ़ाइलों को बनाने की अनुमति देता है। मेरी सीएसएस फ़ाइल (साथ या गंभीर शैलियों के बिना) और 2 महत्वपूर्ण सीएसएस फ़ाइलें - -

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

    .head .logo { 
     display: block 
    } 
} 

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

.main { 
    color: #333; 
} 

.footer { 
    background: black; 
} 

Postcss-महत्वपूर्ण-सीएसएस 3 फ़ाइलें उत्पन्न होगा v2.css और crit.css

आशा यह आप में मदद मिलेगी!