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');

Woud 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/

webpack捆绑包是否多次等同于对等依赖项？

1 个答案: