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和其他模块捆绑包)只捆绑一次.

每个反应组件都将获得自己的范围,当它需要/导入另一个模块时,webpack将检查所需的文件是否已包含在包中.

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