chrome63支持动态 import()

编者按：本文由Rye在众成翻译平台上翻译。本文作者为 Mathias Bynens， 系V8 开发者.

Note: Chrome 63和 Safari Technology Preview24 表示已经支持动态 import() 加载ES Module。

动态 import() 提案介绍了一个类似 import 的函数，和静态 import 相比，它解锁了一些新的能力，本文将比较这两者，并做出概述。

Static import

早在9月份，Chrome 61就提供了对ES2015 import 语句的支持，实现 模块加载 。

util.mjs 代码如下：

// Default export
export default () => {
  console.log('Hi from the default export!');
};

// Named export `doStuff`
export const doStuff = () => {
  console.log('Doing stuff…');
};

下面的代码通过静态 import 使用 ./util.mjs 模块：

`


    
扩展符表示这是一个模块而不是普通的脚本。在web上文件扩展名并不重要，只要在HTTP头部Content-Type上加上正确的MIME类型就可以，例如JavaScript 文件的MIME类型是text/javascript。.mjs文件扩展名在像Node这样的平台上非常有用，Node没有MIME类型的概念，也没有像type=module这样的属性表示它是一个模块而不是普通脚本。我们在这里使用相同的扩展名来保证跨平台的一致性，并明确区分模块和常规脚本。
这个导入模块的语法形式是一种 静态 声明：它只接受一个字符串作为模块标识符，通过预运行时将绑定引入本地作用域的“连接”过程。 静态import语法只能在文件的顶层使用，它可以开启一些重要功能，如静态分析、捆绑工具和tree-shaking。
下面这些有用的场景，是用静态import解决不了的:
根据需要导入模块（或有条件）
在运行时计算模块标识符
从一个普通的脚本中导入一个模块（而不是从一个模块中导入）
Dynamic import() 🔥
动态import()提案介绍了一个类似import的函数，import(moduleSpecifier) 在获取，实例化并评估所有模块的依赖关系后（包扩这个模块本身），返回这个请求模块的命名空间的Promise对象。
下面的代码展示了如何通过动态import()使用./util.mjs模块：
`