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

Question

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

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

****
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

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