webpack 如何处理导入同一个模块的多个文件 React

Question

我有一个 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>;
    }
}

Answer 1

不，webpack（类似于 browserify 和其他模块打包器）只会打包一次。

每个 React 组件都会有自己的范围，当它 requires/imports 另一个模块时，webpack 会检查所需的文件是否已经包含在包中。

所以不会，不会导致重复代码。但是如果你导入一些外部打包的库，你可能会有一些重复的代码。在这种情况下，您可以使用 Webpack 的重复数据删除插件来查找这些文件并对其进行重复数据删除。此处提供更多信息：https://github.com/webpack/docs/wiki/optimization#deduplication

webpack 如何处理导入同一个模块的多个文件 React

How does webpack handle multiple files importing the same module React

reactjs

webpack