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

【问题标题】：ES6 Do importing same component multiple times across an SPA have performance issues?ES6 跨 SPA 多次导入相同的组件是否存在性能问题？
【发布时间】：2019-08-04 09:11:15
【问题描述】：

背景 - 刚接触 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 被导入两次（至少我是这么认为的）。因此混乱。

这有什么要注意的吗？

【问题讨论】：

标签： javascript vue.js ecmascript-6 vue-component

【解决方案1】：

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

【讨论】：

它应该是 IIFE（立即调用函数表达式）还是 IFFE。当我搜索 js IFFE 时，Google 说你的意思是：js IIFE :)

【解决方案2】：

在多个地方重用同一个共享模块是模块的重点。无论您多久导入一个模块，它都只会加载和评估一次。

没什么好担心的。

【讨论】：

如果有一些证据来支持这一点会很好 - 我想也是这样 - 但不一定是这样
@NoelEvans 您可以阅读模块的设计文档或规范的相应部分，但我认为不需要引用就足够明显了。 “不一定是这样的”是什么意思？
编译后的 JS 由引擎在众多浏览器之一中呈现。如果 Chrome 两次读取相同的导入，它是否会再次关闭引用模块的加载？我当然希望如此，但答案只能通过经验得出——源代码引用或统计数据表明，与单次导入相比，导入相同（大）模块 100 次对页面加载没有影响。
@NoelEvans 是的，如果多个导入说明符解析为同一个 url，则该 one 引用的模块既不会加载也不会执行两次。您不需要轶事证据，只需阅读规范即可。