सीएसएस कोड विभाजन और प्रतिक्रिया रूटर

Question

मैं के साथ मेरी JavaScript फ़ाइलों बंटवारे कोड हूँ रूटर और Webpack 2 प्रतिक्रिया इस तरह:

export default { 
    path: '/', 
    component: Container, 
    indexRoute: { 
    getComponent(location, cb) { 
     if (isAuthenticated()) { 
     redirect(); 
     } else { 
     System.import('../landing-page/LandingPage') 
      .then(loadRoute(cb)) 
      .catch(errorLoading); 
     } 
    }, 
    }, 
    childRoutes: [ 
    { 
     path: 'login', 
     getComponent(location, cb) { 
     System.import('../login/Login') 
      .then(loadRoute(cb)) 
      .catch(errorLoading); 
     }, 
    }, 
    { /* etc */ 
    } 
}; 

कौन इस बंडल पर परिणाम:

public/ 
    vendor.bundle.js 
    bundle.js 
    0.bundle.js 
    1.bundle.js 
    2.bundle.js 

कौन सा इसका मतलब है कि अंतिम उपयोगकर्ता केवल उस जावास्क्रिप्ट को प्राप्त कर रहा है जिसकी उसे आवश्यकता है।

बात यह है कि: सीएसएस भाग के लिए, मैं हूं किसी भी चीज को करने के लिए कोई संसाधन नहीं ढूंढ रहा है, जो उपयोगकर्ता की जरूरतों के अनुसार सीएसएस को विभाजित करना है।

क्या वेबपैक 2 और रिएक्ट राउटर के साथ ऐसा करने का कोई तरीका है?

Answer 1

हां, यह किया जा सकता है। ExtractTextPlugin के अतिरिक्त आपको CommonsChunkPlugin की आवश्यकता होगी। साथ ही, अनेक प्रवेश बिंदुओं

entry: { 
    A: "./a", 
    B: "./b", 
    C: "./c", 
}, 

को परिभाषित करने और ExtractTextPlugin कॉन्फ़िगर सीएसएस फ़ाइल नाम के रूप में प्रवेश बिंदु नाम का उपयोग करने

new ExtractTextPlugin({ 
    filename: "[name].css" 
}), 

एक पूर्ण उदाहरण देखें:

https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle

Answer 2

जब मैं हो सकता है अपने प्रश्न का उत्तर न दें सीएसएस फ़ाइलों को कैसे विभाजित करें ताकि केवल आवश्यक वाले लोड जिस तरह से आप प्रश्न का उत्तर देना चाहते हैं (कोई प्लगइन या उस तरह की चीज़ नहीं), मैं आपको एक संभावित विकल्प देने की आशा करता हूं।

styled-components जावास्क्रिप्ट फ़ाइल के अंदर घटकों को स्टाइल करने के लिए नई ES6 सुविधा tagged template literal का उपयोग करें। मुझे लगता है कि इस पुस्तकालय का उपयोग केवल आवश्यक सीएसएस फाइलों को लोड करने की आपकी समस्या को हल करेगा, क्योंकि प्रति सीएसएस फाइलें नहीं होंगी।

react-boilerplatechose styled-components over sass, क्योंकि

styled-components एक अधिक शक्तिशाली दृष्टिकोण: बजाय कोशिश कर एक स्टाइल भाषा कार्यक्रम संबंधी क्षमताओं देने के लिए की है, यह तर्क और इन सुविधाओं से संबंधित जे एस में विन्यास बाहर खींचती है।

तो styled-components का उपयोग कर न केवल लोड हो रहा है की अपनी समस्या केवल आवश्यक सीएसएस का समाधान होगा, लेकिन यह आगे अपने आवेदन के decoupling को जोड़ना होगा, यह आसान डिजाइन और अपने ऐप के बारे कारण परीक्षण करने के लिए बनाता है।

यहां live demo है जहां आप styled-components के साथ प्रयोग कर सकते हैं और यह जांच सकते हैं कि यह कैसे काम करता है।