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
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()
如果你想参与讨论,请点击这里