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

2017-11-23 14:49:08来源:segmentfault作者:justjavac人点击

分享
第七城市

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()


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


第七城市

微信扫一扫

第七城市微信公众平台