Come fa il webpack a gestire più file importando lo stesso modulo React

Question

Ho un'app React che ha molti componenti che importano gli stessi moduli. Il webpack importa ogni modulo una volta per ogni file che lo richiede, con conseguente codice duplicato (in questo caso ogni importazione due volte solo per i due componenti)? Sto considerando di riscrivere i componenti in modo che i componenti figlio non abbiano bisogno di richiedere i moduli React, ma forse sto risolvendo un problema che non esiste. Vorrei evitare molte importazioni dello stesso modulo di reazione se risulta in un codice duplicato.

Componente 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>; 
    } 
} 

Componente 2 importando gli stessi 3 moduli.

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

No, webpack (simile a browserify e altri fardellatrici modulo) sarà solo fascio una volta.

Ogni componente di reazione avrà il proprio ambito e quando richiede/importa un altro modulo, webpack verificherà se il file richiesto era già incluso o meno nel pacchetto.

Quindi no, non genererà un codice duplicato. Tuttavia, se importi alcune librerie pacchettizzate esterne, potresti avere del codice duplicato. In tal caso, è possibile utilizzare il plug-in Deduplicazione di Webpack per trovare questi file e deduplicarli. Maggiori informazioni qui per quello: https://github.com/webpack/docs/wiki/optimization#deduplication