Chrome 63 正式支持动态导入 | Dynamic import()

dev-reading/fe 是一个阅读、导读、速读的 repo，不要依赖于 dev-reading/fe 学习知识。本 repo 只是一个快速了解文章内容的工具，并不提供全文解读和翻译。你可以通过本平台快速了解文章里面的内容，找到感兴趣的文章，然后去阅读全文。

本文地址：https://github.com/dev-readin...

阅读时间大概 1 分钟

• 浏览器支持：Chrome 63、 Safari 24 预览版

• TC39 proposal：https://github.com/tc39/propo...

• Stage：3

• 规范：https://tc39.github.io/propos...

Static import

Chrome 61 开始支持 ES2015 的 modules。

import 导入的模块必须是字符串字面量，不能是变量。因为 import 是在编译时（pre-runtime）确定的，这要早于运行时。如下代码将报错:

if (name === ‘jjc‘) {
  import myName from ‘./jjc‘;
} else {
  import myName from ‘./other‘;
}

下面代码也会报错：

const name = ‘jjc‘;
import myName from name;

静态导入可以在编译阶段对代码进行静态分析、构建、tree-shaking 等。

Dynamic import()

动态导入可以让我们进行按需导入等特性。

语法：

import(moduleSpecifier)

import() 返回一个 Promise

<script type="module">
  const moduleSpecifier = ‘./utils.js‘;
  import(moduleSpecifier)
    .then((module) => {
      // doSth.
    });
</script>

注意：import() 虽然看上去像一个函数调用，但其实 import 只是恰好使用了括号语法而已（类似于 super()）。
这意味着 import 并不是继承自 Function.prototype，所以不能使用 call 和 apply。
使用 const importAlias = import 也是不行的。甚至，import 根本就不是一个对象！

建议

"静态 import" 和"动态 import()" 都同样重要。使用静态导入可以在运行之前构建模块的依赖关系，而动态导入可以在运行时按需加载模块。

阅读原文：Dynamic import()

讨论地址：动态 import()

如果你想参与讨论，请点击这里