既然 ES2015 动态 import() 被广泛支持，那么 ES2015 静态导入有哪些优势呢？

Question

我越来越多地使用 ES2015 模块。

通常情况下，我倾向于通过动态 import() 语法加载模块，使用以下模式的变体：

import(moduleURL.js).then(importedModule => myFunction(importedModule));

在 2020 年初，这似乎是一种没有陷阱的方法，因为 import() 现在拥有近乎通用的浏览器支持。

见：https://caniuse.com/#feat=es6-module-dynamic-import

但这是否也意味着静态import 语句如下：

• import * as myModule from 'moduleURL.js'
• import { myNamedExport } from 'moduleURL.js'
• import myDefaultExport from 'moduleURL.js'

现在已被有效（尽管不是正式）弃用？

如果不是 - 我的猜测是它们没有被有效弃用 - 静态 import 语句相对于动态 import() 的具体技术优势是什么？

在什么情况下我最好使用前者而不是后者？

---

进一步阅读：

• 静态import 语句：

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

• 动态import():

  • Dynamically importing ES modules with import() 莱昂纳多·布鲁诺·利马

---

我为什么要问 ES2015 static import 的优点？

这不仅仅是无聊的好奇心。

我希望在我的工作流程中标准化某些流程，我对import() 非常满意。

但在我到处采用import() 之前，我想确保我不会错过静态import 语句提供的特定功能或优势，但它们更年轻、更动态的对应语句却没有。

Answer 1

使用同步代码比使用异步代码更容易。虽然您可以在任何地方使用动态导入，但这需要在任何地方放置.thens（或顶级awaits，一旦支持）。仅此一项就会导致令人讨厌的语法噪音。当您必须同时导入多个模块时，情况会变得更糟：

Promise.all([
  import('foo'),
  import('bar')
])
  .then(([foo, bar]) => {
    // do stuff with foo and bar
  });

相比

import foo from 'foo';
import bar from 'bar';

更少的语法噪音意味着更少的错误表面积。

另请注意，虽然动态导入得到广泛支持，但并未得到普遍支持。一小部分用户还在旧版 Edge 上，或者 FF 56 或以下，或 Chrome 62 及以下，甚至 IE11。有些人可能认为最好提供适用于基本上所有人的脚本，而不仅仅是绝大多数人。 （这就是为什么 Babel 在今天仍然如此普遍使用的原因之一）