मैं शायद ReactJS में कम फ़ाइलों को लोड करने की एक बहुत ही बुनियादी समझ खो रहा हूँ, लेकिन मैं निम्नलिखित समस्या को हल करने में असमर्थ हूँ।

मैंने घटक बनाए हैं और उनमें से प्रत्येक के लिए कम फ़ाइलें बनाई हैं, उदाहरण के लिए:

import * as React from 'react';
import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import { NavLink } from 'react-router-dom';
import '../styles/how-it-works-styles.less';
import Icon from 'antd/lib/icon';


class HowItWorksComponent extends React.PureComponent<Props> {

  public constructor(props: Props) {
      super(props);
  }

  public render() {
    return (
        <Row className={'steps-row'}>

अब जब मैं एक पृष्ठ लोड करता हूं जहां यह घटक बिल्कुल उपयोग नहीं किया जाता है, तो कम फ़ाइल अभी भी डोम में लोड हो रही है। क्या कोई समझा सकता है कि ऐसा क्यों हो रहा है और मैं इसे होने से कैसे रोक सकता हूं?

3
apfz 4 नवम्बर 2018, 14:47

1 उत्तर

सबसे बढ़िया उत्तर

आपकी समस्या वास्तव में कम नहीं है, बल्कि एक सामान्य समस्या है कि वेब ऐप को बेहतर तरीके से कैसे बंडल किया जाए। चूंकि आप अपना मुख्य ऐप घटक या अपनी वेबपैक कॉन्फ़िगरेशन प्रदान नहीं कर रहे हैं (मान लीजिए कि आप बंडलिंग के लिए वेबपैक का उपयोग कर रहे हैं), मुझे स्पष्ट रूप से आपके सेटअप का विवरण नहीं पता है। सामान्य तौर पर, मानक कॉन्फ़िगरेशन सभी घटकों और अन्य आयातों को एक बड़ी फ़ाइल में प्रवेश बिंदु फ़ाइल से प्राप्त करने के लिए बंडल करना है। तथ्य यह है कि आप अपने ऐप को "पेज" में विभाजित करने के लिए प्रतिक्रिया राउटर या इसी तरह का उपयोग करते हैं, यह नहीं बदलता है, क्योंकि प्रतिक्रिया राउटर केवल प्रभावित करता है कि कौन से घटक बंडलिंग नहीं करते हैं।

यदि आपको अपने ऐप को कई बंडलों में विभाजित करने की आवश्यकता है (जिस पर विचार करने के लिए आईएमओ को अपेक्षाकृत बड़े ऐप की आवश्यकता है) तो आप अपने कुछ घटकों को "लोड करने योग्य" बनाने के लिए गतिशील आयात का उपयोग कर सकते हैं। इसका मतलब है कि उन्हें एक अलग बंडल में रखा जाएगा जिसे केवल आवश्यकतानुसार लोड किया जाता है। इसे कैसे सेट करें, इस पर प्रतिक्रिया राउटर दस्तावेज़ में एक ट्यूटोरियल है: https: //reacttraining.com/react-router/web/guides/code-splitting

1
Jonas Høgh 4 नवम्बर 2018, 18:15