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