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

StonePanda 发布于2019-08-21 17:43 / 2500人阅读

摘要：导入的模块必须是字符串字面量，不能是变量。动态导入可以让我们进行按需导入等特性。这意味着并不是继承自，所以不能使用和。使用静态导入可以在运行之前构建模块的依赖关系，而动态导入可以在运行时按需加载模块。

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

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

建议

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

阅读原文：Dynamic import()
讨论地址：动态 import()
如果你想参与讨论，请点击这里

服务器托管超融合服务器 chrome 支持webrtc chrome 支持 webrtc chrome不支持webrtc webrtc chrome不支持

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89916.html

ES6之路之模块详解

摘要：例如我们导入模块，可以这么导入桃翁欢迎关注公众号前端桃园报错不能定义相同名字变量报错，不能重新赋值小猪可以看到导入绑定这里不理解绑定，文章后面会解释时，形式类似于对象解构，但实际上并无关联。欢迎访问个人站点简介何为模块一个模块只不过是一个写在文件中的 JavaScript 代码块。模块中的函数或变量不可用，除非模块文件导出它们。简单地说，这些模块可以帮助你在你的模块中编写...

huashiou 2019-08-22 17:13 评论0 收藏0
ELSE 技术周刊(2017.12.04期)

摘要：版本支持动态，对比九月支持的静态，动态会返回请求模块命名空间的对象以供使用使用开发浏览器插件的过程与收获初次认识是在年阿里的论坛会上，只知道它是运行在天生支持跨平台性的语言，好像很值得关注。团队分享 React 整洁代码最佳实践作为开发人员不能仅仅满足于代码可以工作，而应该让代码更易于编写，阅读和维护，这篇文章介绍了很多 clean code 在 React 应用开发上的最佳实践。...

Salamander 2019-08-21 17:53 评论0 收藏0
webpack 4.0.0 release notes

摘要：重大改变环境不再支持。它们允许在使用动态表达式时过滤文件。可以使用它来创建相对于应用程序根目录的东西启用时，将标志添加到上下文已替换为图已更改之前以父子关系相关联。现在以父子关系相关联。重大改变（Big changes）环境（Environment）不再支持Node.js 4。源码更新到更高的ecmascript环境版本。使用（Usage）您现在必须在两种模式之间选...

raledong 2019-08-23 12:17 评论0 收藏0