Как webpack обрабатывает несколько файлов, импортирующих один и тот же модуль React

У меня есть приложение React, в котором есть много компонентов, импортирующих одни и те же модули. Является ли webpack импортировать каждый модуль один раз для каждого файла, запрашивающего его, что приводит к дублированию кода (в этом случае каждый импорт дважды для двух компонентов)? Я рассматриваю возможность перезаписи компонентов, чтобы дочерние компоненты не нуждались в модулях React, но, возможно, я решаю проблему, которая не существует. Я бы хотел избежать многих импорта одного и того же реактивного модуля, если это приведет к дублированию кода.

Компонент 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>;
    }
}

Ответы

Ответ 1

Нет, webpack (аналогично браузеру и другим модулям) просто свяжет его один раз.

Каждый реагирующий компонент получит свою собственную область, а когда он потребует/импортирует другой модуль, webpack проверяет, был ли уже добавлен требуемый файл или нет в комплекте.

Нет, это не приведет к дублированию кода. Однако, если вы импортируете некоторые внешние упакованные библиотеки, у вас может быть некоторый дублирующий код. В этом случае вы можете использовать плагин дедупликации Webpack, чтобы найти эти файлы и дедуплицировать их. Подробнее здесь: https://github.com/webpack/docs/wiki/optimization#deduplication