वेबपैक एक ही मॉड्यूल को आयात करने वाली एकाधिक फ़ाइलों को कैसे संभालता है प्रतिक्रिया

Question

मेरे पास एक रिएक्ट ऐप है जिसमें कई घटक समान मॉड्यूल आयात करते हैं। वेबपैक प्रत्येक मॉड्यूल को प्रत्येक फ़ाइल के अनुरोध के लिए एक बार आयात करता है, जिसके परिणामस्वरूप डुप्लिकेट कोड होता है (इस मामले में प्रत्येक घटक केवल दो घटकों के लिए दो बार आयात करता है)? मैं घटकों को फिर से लिखने पर विचार कर रहा हूं ताकि बाल घटकों को प्रतिक्रिया मॉड्यूल की आवश्यकता न हो, लेकिन शायद मैं ऐसी समस्या को हल कर रहा हूं जो अस्तित्व में नहीं है। यदि मैं डुप्लिकेट कोड में परिणाम देता हूं तो मैं एक ही प्रतिक्रिया मॉड्यूल के कई आयातों से बचना चाहता हूं।

घटक 1

import React from "react"; 
import { Link } from "react-router"; 
import ReactLogo from "elements/ReactLogo"; 

export default class MainMenu extends React.Component { 
    render() { 
     return <div> 
      <ReactLogo type="svg" /> <ReactLogo type="png" /> <ReactLogo type="jpg" /> 
      <h2>MainMenu:</h2> 
      <ul> 
       <li>The <Link to="home">home</Link> page.</li> 
       <li>Do something on the <Link to="todo">todo page</Link>.</li> 
       <li>Switch to <Link to="some-page">some page</Link>.</li> 
       <li>Open the chat demo: <Link to="chat" params={{room: "home"}}>Chat</Link>.</li> 
       <li>Open the page that shows <Link to="readme">README.md</Link>.</li> 
      </ul> 
     </div>; 
    } 
} 

घटक 2 एक ही 3 मॉड्यूल आयात करने।

import React from "react"; 
import { Link } from "react-router"; 
import ReactLogo from "elements/ReactLogo"; 

export default class MainMenu extends React.Component { 
    render() { 
     return <div> 
      <ReactLogo type="svg" /> <ReactLogo type="png" /> <ReactLogo type="jpg" /> 
      <h2>MainMenu:</h2> 
      <ul> 
       <li>The <Link to="home">home</Link> page.</li> 
       <li>Do something on the <Link to="todo">todo page</Link>.</li> 
       <li>Switch to <Link to="some-page">some page</Link>.</li> 
       <li>Open the chat demo: <Link to="chat" params={{room: "home"}}>Chat</Link>.</li> 
       <li>Open the page that shows <Link to="readme">README.md</Link>.</li> 
      </ul> 
     </div>; 
    } 
} 

Answer 1

नहीं है, webpack (समान browserify करने और अन्य मॉड्यूल bundlers) केवल एक बार बंडल होगा।

हर प्रतिक्रिया घटक अपने स्वयं के दायरे मिल जाएगा, और जब यह आवश्यकता है/एक और मॉड्यूल आयात करता है, webpack यदि आवश्यक फ़ाइल पहले से ही शामिल किया गया था या बंडल में नहीं की जाँच करेगा।

तो नहीं, इसका परिणाम डुप्लिकेट कोड नहीं होगा। हालांकि अगर आप कुछ बाहरी पैकेज किए गए पुस्तकालयों को आयात करते हैं, तो आपके पास कुछ डुप्लिकेट कोड हो सकता है। उस स्थिति में, आप इन फ़ाइलों को खोजने और उन्हें समर्पित करने के लिए वेबपैक की डीडुप्लिकेशन प्लगइन का उपयोग कर सकते हैं। इसके लिए यहां अधिक जानकारी: https://github.com/webpack/docs/wiki/optimization#deduplication