动态import简介

哥弟网 • 2022年7月21日上午5:11 • 行业 • 阅读 18

作者：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