动态import简介

作者:TYANer

动态 import 是 JavaScript ES2020 规范中引入的功能之一。这个特性使得 ES2015(ES6)中引入的模块更加有用和强大。本文将帮助你了解 JavaScript 中的动态 import 是什么、它们是如何工作的以及如何使用它们。

ES 模块和分块

模块是作为 ES2015(ES6)规范的一部分引入的。这为 JavaScript 开发人员提供了一种很好的原生方式来将他们的 JavaScript 代码分成更小的块。模块还使管理这些块变得更容易,甚至使大型代码库对开发人员更友好。

最好的是这个分块过程非常简单和容易。当你想要使用模块时,基本上只需要做两件事。

首先,需要导出一些想在其他地方使用的代码。为此,必须使用导出语句

当想使用导出的其中一个块时,要做的第二件事是:使用import 语句在想要使用的文件中导入特定的代码块。这将使导出的代码块在当前使用的文件范围内可用。

import 语法参考:

import defaultExport from “module-name”; import * as name from “module-name”; import { export } from “module-name”; import { export as alias } from “module-name”; import { export1 , export2 } from “module-name”; import { foo , bar } from “module-name/path/to/specific/un-exported/file”; import { export1 , export2 as alias2 , […] } from “module-name”; import defaultExport, { export [ , […] ] } from “module-name”; import defaultExport, * as name from “module-name”; import “module-name”; var promise = import(“module-name”); // 这是一个处于第三阶段的提案。

示例:

// 文件 file1.js // 使用 “export” 语句导出一些函数: export const sumTwoNumbers = (numA, numB) => numA + numB // 文件 file2.js // 使用 “import” 语句导入导出的函数 sumTwoNumbers: import { sumTwoNumbers } from ./file1 // 使用导入的函数: sumTwoNumbers(15, 98) // 输出: // 113 // 注意: // 你还可以使用默认导出导出某些内容 export default (numA, numB) => numA + numB // 文件 file2.js // 使用默认的 “import” 语句导入导出的函数 sumTwoNumbers: import sumTwoNumbers from ./file1

只需两个语法非常简单易记的语句,你就可以在任何地方使用我们的代码。不幸的是,通常没有什么是完美的,模块当然也有一些缺点。

静态导入的问题

ES 模块的一大缺点是它们是静态的。这意味着当你导入某个模块时,无论代码是否被执行,它都会被导入。让我们回到上面使用 sumTwoNumbers 函数的示例。想象一下这个函数只在某些特定条件下被调用的情况。

比如,如果代码里有一些 if…else 语句并且该函数仅在其中调用。运行此代码时,将导入包含 sumTwoNumbers 函数的模块。JavaScript 不会关心 if…else 语句是否调用该函数。它将导入模块,如果函数没有执行,则不是 JavaScript 的问题。

这对你和其他任何运行你的代码的人来说意味着什么呢?很简单,无论是否实际使用,你都必须下载并运行在某处导入的所有内容。在大多数情况下这可能没问题。但是,有时候,你可能想要为用户节省一些带宽。

有一种方法是有条件地加载那些导入的模块。默认情况下,你不会总是加载它们,而是仅在你知道它们将被使用时才加载。如果是 sumTwoNumbers 函数和 if…else 语句,你可以在 if…else 语句中导入 sumTwoNumbers 函数。

当执行上下文进入语句时,你肯定会知道该函数将被调用。这就是动态导入有用的地方。

使用动态导入

动态导入是仅在你知道需要时才导入一些代码块。例如,在调用函数的 if…else 语句中加载 sumTwoNumbers 函数。如果语句中的代码块永远不会执行,则永远不会导入带有 sumTwoNumbers 的模块。

听起来还不错对吗?更棒的是,动态导入和静态导入的语法几乎相同,区别在于不是将 import 作为语句使用,而是将 import 作为函数使用。该函数接受一个参数,即模块的路径,并返回一个promise。

// 动态导入语法: const module = import(path) // 示例: const module1 = import(./myModule) const modulePath = ./myModule const module2 = import(modulePath)

这种使用方式也支持 await 关键字。

const module = await import(./myModule)

什么时候使用动态导入

看起来动态导入似乎是静态导入的替代品,但是静态导入可以更好的初始化依赖,也更有利于静态分析工具和 tree shaking 发挥作用,因此请不要滥用动态导入。

下面的场景中,你可能会需要使用动态导入:

当静态导入的模块很明显的降低了代码的加载速度且被使用的可能性很低,或者并不需要马上使用它。当静态导入的模块很明显的占用了大量系统内存且被使用的可能性很低。当被导入的模块,在加载时并不存在,需要异步获取。当导入模块的说明符,需要动态构建。(静态导入只能使用静态说明符)当被导入的模块有副作用(这里说的副作用,可以理解为模块中会直接运行的代码),这些副作用只有在触发了某些条件才被需要时。(原则上来说,模块不能有副作用,但是很多时候,你无法控制你所依赖的模块的内容)

本文由 哥弟网 原创,转载请注明出处:http://www.gdnhd.com/10054.html

(0)
上一篇 2022年7月21日 上午5:10
下一篇 2022年7月21日 上午5:11

相关推荐

  • 干货这11个不受疫情影响的行业,生意火爆,把握住了别再选错

    2019年随着全球疫情的来袭,人们的生活发生了巨大的变化,商业上众多行业更是收到了致命的打击,以前人们都纷纷断言商业的大趋势:人们永远离不开衣、食、住、行,这是永远的提饭碗,但是:餐饮饭店的倒闭、电影院的关门、时尚衣帽、楼市房产……无一不收到疫情的影响! 但是,人们的智慧和对金钱财富的渴望,在任何的情况下,总会不断地发现新的商机的,这…

    2022年7月17日
    1900
  • 动态语言和静态语言的本质区别是什么?

    动态语言是微机时代的代表,为编写KB级项目而设计的,从技术上讲非常过时。windows95出现之后,绝大多数动态语言都死掉了。 微机时代计算机并不是独立学科,而是属于电工学的一个分支。所以严格意义上,当时没有程序员,只有写代码的电工。 微机时代的计算机使用软盘储存数据,最大容量才1.4MB,程序都特别简单,一个完整的商业操作系统才几百kb。当时的三大操作系统…

    行业 2022年7月21日
    1500
  • 矫正安帮工作近期动态速递

    荣休仪式 7月14日,奉贤区社区矫正党支部为退休民警朱阿林举办荣休仪式。市司法局刑罚执行处二级调研员张国华,区司法局副局长朱建明参加活动。 仪式上,朱阿林结合自己36年的工作经历,回顾了自己入党、从警的初心使命。他表示,尽管自己将要离开工作岗位,但始终心系社区矫正工作,他勉励选派民警要坚定理想信念、努力工作,发挥好民警自身特点和优势,为社区矫正工作发展作出更…

    2022年7月22日
    4500
  • 关于加快推进公募基金行业高质量发展的意见

    证监发〔2022〕41号 中国证监会各派出机构,各交易所,各下属单位,各协会,会内各部门: 公募基金作为重要的机构投资者,在资本市场改革发展稳定中发挥着日益重要的作用。近年来,在党中央、国务院的坚强领导和国务院金融委的统一指挥协调下,国内经济金融环境不断优化,资本市场深化改革持续推进,公募基金行业呈现良好发展态势,行业规模快速增长,产品结构持续优化,规范水平…

    2022年7月16日
    1800
  • 第七届全国铸造行业职业技能竞赛在济南开幕

    齐鲁网·闪电新闻7月16日讯7月16日,由人力资源和社会保障部批准,中国铸造协会、中国就业培训技术指导中心联合主办,山东省平阴县人民政府、中铸未来教育科技(北京)有限公司联合承办的第七届全国铸造行业职业技能竞赛济南平阴开幕。来自山东、辽宁、广东、河北等地的230多名选手参加比赛。 据悉,全国铸造行业职业技能竞赛是中国铸造业顶级赛事,已经成功举办了六届。目前该…

    2022年7月17日
    2100

发表评论

您的电子邮箱地址不会被公开。

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信