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

1

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

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

阅读时间大概 1 分钟


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,所以不能使用 callapply
使用 const importAlias = import 也是不行的。甚至,import 根本就不是一个对象!

建议

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


阅读原文:Dynamic import()

讨论地址:动态 import()

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


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...