我有一个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个模块。
不能,webpack(类似于browserify和其他模块捆绑器)只会捆绑一次。
每个react组件都有自己的作用域,当它需要/导入另一个模块时,webpack将检查所需的文件是否已经包含在捆绑包中。
所以不,它不会导致重复的代码。但是,如果导入一些外部打包的库,则可能会有一些重复的代码。在这种情况下,您可以使用Webpack的重复数据删除插件找到这些文件并进行重复数据删除。此处的更多信息:https : //github.com/webpack/docs/wiki/optimization#deduplication