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

发布于 2022-09-12 01:47:26 字数 282 浏览 21 评论 0

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

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

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

画离情绘悲伤 2022-09-19 01:47:26

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

解决方案有几个:

  1. 引用子项目的时候,不要引用打包后的文件(通常为 import sub1 from 'sub1';),而是引用入口文件,比如 import sub1 from 'sub1/src';
  2. 子项目 build 的时候使用 chunk 拆分成业务逻辑和依赖,即常见的 app.js 和 vendor.js
  3. 子项目 build 不同版本,作为依赖时,将依赖使用 externals 避免打包
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文