webpackは、同じモジュールをインポートする複数のファイルをどのように扱いますか？

Question

同じモジュールをインポートする多くのコンポーネントを持つReactアプリケーションがあります。 webpackは、要求するファイルごとに各モジュールを一度インポートするので、重複したコードが生成されます（この場合、2つのコンポーネントの2回のインポートがそれぞれ2回になります）。子コンポーネントがReactモジュールを必要としないようにコンポーネントを書き直すことを検討していますが、存在しない問題を解決している可能性があります。重複したコードが生成された場合、同じ反応モジュールの多くのインポートを避けたいと思います。同一の3つのモジュールをインポート

成分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。

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のDeduplicationプラグインを使用してこれらのファイルを検索し、重複排除することができます。それ以上の情報はhttps://github.com/webpack/docs/wiki/optimization#deduplication