打包时循环依赖(circular dependency)警告

15 篇文章 1 订阅
9 篇文章 0 订阅

我在打包构建我的vue3项目的时候,有这么一个警告信息:

Export “useProjectStore” of module “src/store/modules/user.js” was reexported through module “src/store/index.js” while both modules are dependencies of each other and will end up in different chunks by current Rollup settings. This scenario is not well supported at the moment as it will produce a circular dependency between chunks and will likely lead to broken execution order.

这个警告信息表明在你的项目中存在循环依赖的情况,可能会导致执行顺序混乱或出现错误。具体来说,警告信息指出了 useUserStore 在模块 src/store/modules/user.js 中被重新导出,并且同时被模块 src/store/index.js 依赖,而这两个模块可能会被打包到不同的块(chunks)中。

一般项目的依赖,或者是自己写的组件、函数等等向外界暴露接口或服务的时候,都是作为一个封装模块提供给另外的服务一些基础功能,所以在构建项目的时候一般不会碰到循环依赖的情况。

但是某些时候,就像我的项目中,有两个文件,他们有这么一种关系:一个是 pinia 的状态管理文件,管理着用户相关的状态,并含有初始化函数,在初始化函数中发送了请求;另一个是封装 axios 的请求相关文件,需要根据用户状态在请求的时候有一些不同的行为。这两个文件中都有互相需要的东西,所以他们都 import 了对方。

那么为什么在循环依赖的时候,模块可能会打包到不同的块?
在构建工具(如Rollup、Webpack等)处理循环依赖时,它们会尝试将模块拆分到不同的块(chunks)中以确保正确的执行顺序。

循环依赖的情况下,两个模块相互依赖,构建工具需要确保它们之间的依赖关系被正确处理,以避免在运行时出现错误。

为了解释为什么它们可能会被打包到不同的块,让我们来看一个简单的例子:

假设有两个模块,A 和 B,它们相互依赖:

模块 A:

Copy code
import { somethingFromB } from './B';
// ...

模块 B:

Copy code
import { somethingFromA } from './A';
// ...

如果构建工具将它们放在同一个块中,就可能会导致问题。因为在运行时,模块 A 和 B 会在加载时相互等待,造成死锁或者其他执行错误。

将它们放在不同的块中可以避免这种情况。当然,这也会导致新的问题,比如需要确保在加载时正确地解析它们的依赖关系。

在我的代码中,我是这么解决的:
各个 pinia 都导出到同一个 js 文件(index.js),再通过 index.js 统一暴露各个状态管理入口:

- store
	- modules
		- user.js // pinia
		- ... // 其余的 pinia
	- index.js // 将 modules 下的所有 pinia 都导入到这里再暴露出去

所有地方导入 pinia 只需要从@/store下导入即可,而封装着 axios 的文件在引入的时候,不能直接通过 index.js 引入,而是需要把路径写完整:@/store/modules/user.js

给大家参考一下,这种对函数、状态的封装可能出现循环依赖,组件倒不是很可能出现这种情况。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沧州刺史

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值