reactjs - ¿Cómo maneja el webpack varios archivos importando el mismo módulo React?

Question

Tengo una aplicación React que tiene muchos componentes que importan los mismos módulos. ¿Webpack importa cada módulo una vez para cada archivo que lo solicita, dando como resultado un código duplicado (en este caso, cada importación se realiza dos veces solo para los dos componentes)? Estoy considerando volver a escribir los componentes para que los componentes secundarios no necesiten los módulos React, pero quizás esté resolviendo un problema que no existe. Me gustaría evitar muchas importaciones del mismo módulo de reacción si resulta en un código duplicado.

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 los mismos 3 módulos.

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, el paquete web (similar a browserify y otros paquetes de módulos) solo lo empaquetará una vez.

Cada componente de reacción tendrá su propio alcance, y cuando requiera / importe otro módulo, el paquete web comprobará si el archivo requerido ya estaba incluido o no en el paquete.

Así que no, no resultará en un código duplicado. Sin embargo, si importa algunas bibliotecas empaquetadas externas, es posible que tenga algún código duplicado. En ese caso, puede usar el complemento de deduplicación de Webpack para encontrar estos archivos y deduplicarlos. Más información aquí para eso: https://github.com/webpack/docs/wiki/optimization#deduplication