webpack 打包如何处理重复的依赖?

Question

我们有三个子项目，他们都依赖了element ui，子项目可以独立运行。
另外还有个主项目，他依赖了这三个子项目

主项目通过webpack打包出来的文件很大，应该是element ui重复依赖了。
有没有办法实现主项目打包的时候只引入一份element ui文件？

网上搜了下貌似npm link、webpack.resolve.modules、webpack.resolve.alias可能跟解决这个问题有关，但不是很确定。

不是专业做前端的，术语描述上可能不专业，如描述有误望指正，谢谢。

Answer 1

如果你的子项目都打包成 一个 文件，那么的确有这样的风险，否则的话，应该不是。

解决方案有几个：

1. 引用子项目的时候，不要引用打包后的文件（通常为 import sub1 from 'sub1';)，而是引用入口文件，比如 import sub1 from 'sub1/src';
2. 子项目 build 的时候使用 chunk 拆分成业务逻辑和依赖，即常见的 app.js 和 vendor.js
3. 子项目 build 不同版本，作为依赖时，将依赖使用 externals 避免打包