Vue子组件的结构

Question

我有一个Vue项目，其结构如下：

Root app
   View 1
      ComponentA
         ComponentB
      ComponentA
         ComponentB
      ...
      ComponentA
         ComponentB

   View 2
      ComponentC
   View 3
      ComponentA
         ComponentB
   View4
      ComponentD
   ...

该问题专门与ComponentB有关。现在，ComponentB是ComponentA的子级。问题在于，ComponentB每页加载多次，而实际上只需要每页加载一次。我希望将其重构为每页一个ComponentB副本。我目前看到两种方法来实现这一目标：

1. 将ComponentB提取为ComponentA的子项，并将其添加到可能需要它的任何视图中（使用存储来管理全局状态）。 这里的困难在于，我必须将其添加到可能需要该组件的每个视图中（这将要求我将其添加到应用程序的许多页面中，这不利于重构的目的）

2. 提取ComponentB并将其添加到根组件（App.vue）。 这里的困难在于，即使用户不需要它也总是加载它。

是否有更好的方法来完成此操作，或者是否有一种普遍接受的方法是仅在需要时加载组件（基于商店中的触发器或其他某种触发器）？