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

Question

我有一个React应用程序，其中许多组件都会导入相同的模块。Webpack会为每个请求它的文件导入一次模块，从而产生重复的代码吗（在这种情况下，每个组件只是因为两个组件而导入两次）？我正在考虑重新编写组件，以便子组件不需要引用React模块，但也许我正在解决一个不存在的问题。如果导入同一个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>;
    }
}

- byrdr

Answer 1

不会，Webpack（类似于Browserify和其他模块打包工具）只会对其进行一次打包。

每个React组件都将获得自己的作用域，在需要/导入另一个模块时，Webpack将检查所需文件是否已在捆绑包中包含。

因此，不会出现重复代码。但是，如果您导入一些外部打包库，则可能会有一些重复的代码。在这种情况下，您可以使用Webpack的去重插件来查找这些文件并消除重复。有关详细信息，请参见此处：https://github.com/webpack/docs/wiki/optimization#deduplication

- trekforever

---

为什么每个文件都要重复导入？ - Dejan Milosevic

抱歉，但我正在处理这个问题，我的代码被多次包含。我不知道如何解决它。我的所有es6文件大小总共为200kb，而我的“bundle”文件大小为1.3mb。@trekforever - jircdeveloper

那么，React 在导入它的每个组件上都会被复制吗？ - stackjlei

功能在哪里记录？ - Charles Holbrow

如果您的文件中都有相同的代码，但仍然是单独的文件，它们将占用所有空间。如果您有一个包含所有代码的文件，并将其导入到其他6个文件中，它们不会重复所有代码，而是引用原始条目。@jrodriguez - sanjsanj

@DejanMilosevic 因为每个文件都维护着自己的上下文，所以它不知道被捆绑在一起的所有其他文件中包含了什么或者它们做了什么。这并不意味着每个文件都会变得臃肿，重复的代码，webpack会处理这些问题。 - sanjsanj