ES6 在 SPA 中多次导入相同的组件是否存在性能问题？

Question

背景 - 刚接触 ES6 和 SPA（单页应用程序），之前主要从事基于 PHP 的应用程序。

创建一个基于 Vue 的 SPA，并在其中创建可重用的组件并在需要的地方导入它们。现在有几次，我已经编写import了一些组件的代码，其中一个组件依次导入了第一个组件使用的组件。现在忽略最后一行，我将尝试用伪代码解释这一点 -

****
File name: main-component.vue
****

...
import compA from sub-component-a.vue
import compB from sub-component-b.vue
import apiCompA from api-component-a.vue
...

****
File name: sub-component-a.vue
****

...
import compC from sub-component-c.vue
import apiCompA from api-component-a.vue
...

现在加载主要组件时api-component-a.vue会导入两次（至少我是这么认为的）。于是混乱。

这是需要担心的事情吗？

Answer 1

在多个地方重用相同的共享模块是模块的全部要点。无论您导入模块的频率如何，它都只会加载和评估一次。

没有什么可担心的。

Answer 2

这是有效的，因为它基于 nodejs，require并且你可以仅仅因为你正在编译你的 js 就可以做到这一点。在编译过程中，每个模块/组件都会获得它自己的 IIFE，这import意味着组件被简单地注入到其他模块/组件中。如果使用 vue cli 或 webpack 不会有任何性能问题，因为每个模块在最终编译的代码中只会包含一次。