webpack - webpack bundle 是否多次对等对等依赖？

Question

假设我创建了一个名为 react-web-component 的 npm 包使用和进口 react-dom ，像这样:

import ReactDOM from 'react-dom';

export default {
  create: function (app, tagName, options) {
    // Some code
    ReactDOM.render(app, mountPoint);
  }
};

我会在 npm 上将其发布为 react-web-component ;

现在我创建了第二个项目，使用 webpack和 react以及所有其他好东西，我会像这样使用我自己的 npm 包:

package.json

{
  "devDependencies": {
    "react-web-component": "^1.0.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ReactWebComponent from 'react-web-component';
import App from './App';

ReactWebComponent.create(<App />, 'my-react-web-component');

沃德 webpack , 当它捆绑应用程序包时 ReactDom两次还是一次？答案是两次，是否有机会捆绑我的项目 ReactDom只有一次？

Answer 1

假设您使用的是相对较新的 webpack 版本(webpack 2 或更高版本)，它似乎会自动检测并删除重复项(即只捆绑一次)，对于旧版本，可以使用 --optimize-dedupe 手动完成。或 new webpack.optimize.DedupePlugin() .

来源:https://github.com/webpack/docs/wiki/optimization#deduplication

Webpack creating duplicate entries for dependencies

此外，Zillow 似乎创建了一个工具来检测不同版本的重复依赖项，有时可以优化使用相同的版本，该工具在这里:https://github.com/zillow/webpack-stats-duplicates

来源:
https://www.zillow.com/engineering/webpack-optimize-dependencies/