webpack 如何处理导入同一个模块的多个文件 React [英] How does webpack handle multiple files importing the same module React

问题描述

我有一个 React 应用程序，其中有许多组件导入相同的模块.webpack 是否为每个请求它的文件导入每个模块一次，导致重复代码(在这种情况下，每个模块只为两个组件导入两次)?我正在考虑重新编写组件，以便子组件不需要 React 模块，但也许我正在解决一个不存在的问题.如果导致重复代码，我想避免多次导入相同的 react 模块.

组件 1

从react"导入React；从反应路由器"导入{链接}；从elements/ReactLogo"导入 ReactLogo；导出默认类 MainMenu 扩展 React.Component {使成为() {返回 
<ReactLogo type="svg"/><ReactLogo type="png"/><ReactLogo type="jpg"/><h2>主菜单:</h2><ul><li><li>在<Link to="todo">todo页面</Link>上做一些事情.</li><li>切换到<Link to="some-page">某个页面</Link>.</li><li>打开聊天演示:<Link to="chat" params={{room: "home"}}>Chat</Link>.</li><li>打开显示<Link to="readme">README.md</Link>的页面.</li>
;}}

组件 2 导入相同的 3 个模块.

从react"导入React；从反应路由器"导入{链接}；从elements/ReactLogo"导入 ReactLogo；导出默认类 MainMenu 扩展 React.Component {使成为() {返回 
<ReactLogo type="svg"/><ReactLogo type="png"/><ReactLogo type="jpg"/><h2>主菜单:</h2><ul><li><li>在<Link to="todo">todo页面</Link>上做一些事情.</li><li>切换到<Link to="some-page">某个页面</Link>.</li><li>打开聊天演示:<Link to="chat" params={{room: "home"}}>Chat</Link>.</li><li>打开显示<Link to="readme">README.md</Link>的页面.</li>
;}}

解决方案

不，webpack(类似于 browserify 和其他模块打包器)只会打包一次.

每个 react 组件都有自己的作用域，当它需要/导入另一个模块时，webpack 会检查所需的文件是否已经包含在包中.

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

I have a React app which has many components importing the same modules. Does webpack import each module once for each file requesting it, resulting in duplicate code(in this case each import twice for just the two components)? I'm considering re-writing the components so that child components do not need to require the React modules, but maybe I'm solving a problem that doesn't exist. I'd like to avoid many imports of the same react module if it results in duplicate code.

Component 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>;
    }
}

Component 2 importing the same 3 modules.

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>;
    }
}

解决方案

No, webpack (similar to browserify and other module bundlers) will only bundle it once.

Every react component will get its own scope, and when it requires/imports another module, webpack will check if the required file was already included or not in the bundle.

So no, it will not result in duplicate code. However if you import some external packaged libraries, you may have some duplicate code. In that case, you can use Webpack's Deduplication plugin to find these files and deduplicate them. More info here for that: https://github.com/webpack/docs/wiki/optimization#deduplication

这篇关于webpack 如何处理导入同一个模块的多个文件 React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！