Menu
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>; } } 
606
Webpack builds a dependency graph used internally Next step for webpack is to check for everything that is imported from those three files. It does this recursively until it has covered all imported files in the app.
Whenever you import a file in your code, Webpack will look for it in the project directory and copy it to the build folder with a new name, then Webpack replaces the import code in your bundled JavaScript file with the path to the newly copied file.
You no longer need to import React from "react" . Starting from the release 17 of React, JSX is automatically transformed without using React. createElement . However, other exports like hooks must be imported.
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
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
