How does webpack handle multiple files importing the same module React

Question

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

trekforever · Accepted Answer · 2015-10-24 04:12:59Z

26

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

answered Oct 24, 2015 at 4:12

trekforever

3,93227 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dejan0milosevic Over a year ago

Why then repeating imports in every file?

jircdeveloper Over a year ago

Sorry, but i'm working with that and my code is included multiples times. I don't know how fix it. All my files in es6 have a 200kb size (all toghether) and my "bundle" file have 1.3mb @trekforever

stackjlei Over a year ago

So is React duplicated on each component that imports it?

sanjsanj Over a year ago

@jrodriguez If your files all have identical code in them but are still separate files they will take up all that space. If you had one file with all that code and imported it in to 6 other files they would not repeat all that code but instead reference back to the original entry.

sanjsanj Over a year ago

@DejanMilosevic Because each file maintains its own context, it is not aware of what all the other files that are being bundled have inside them or what they do. It doesn't mean that each file will become bloated with repeating code, webpack takes care of that.

|

Collectives™ on Stack Overflow

How does webpack handle multiple files importing the same module React

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related