Javascript 惰性模块加载在typescript中是如何工作的？

在本文中，作者用以下示例解释了延迟加载：

import foo = require('foo');

export function loadFoo() {
    // This is lazy loading `foo` and using the original module *only* as a type annotation
    var _foo: typeof foo = require('foo');
    // Now use `_foo` as a variable instead of `foo`.
}

根据作者的类型，脚本仅在第一次调用

require

时加载

foo

的类型，但在第二次调用时，当创建

foo

var时，它加载创建

var\u foo

所需的整个模块

这是如何工作的。有人能举一个更详细的例子来说明引擎盖下发生了什么吗？

这在

编译器检测每个模块是否在所发出的代码中使用 JavaScript。如果模块标识符仅用作类型的一部分 注释和从不作为表达式，则不需要调用 为该模块发射

在本例中，第一个

foo

（不带下划线的一个）在类型注释中仅作为

typeof

的参数使用一次，因此第一个

require（'foo'）

从生成的javascript代码中被省略。您可以检查生成的

.js

文件以查看该文件，并且在runtine处只有一个对

require

的调用，即“第二个”调用

---

调用

loadFoo（）

时，将执行

require（'foo'）

，调用内置的node.js

require（）

函数，该函数以通常的方式在运行时加载

foo

模块。

Typescript 2.4现在支持在何处可以延迟导入模块

以下是一个例子：

async function getZipFile(name: string, files: File[]): Promise<File> {
    const zipUtil = await import('./utils/create-zip-file');
    const zipContents = await zipUtil.getContentAsBlob(files);
    return new File(zipContents, name);
}

异步函数getZipFile（名称：string，文件：File[]）：Promise{ const zipUtil=wait import（'./utils/create zip file'）； const zipContents=await zipUtil.getContentAsBlob（文件）； 返回新文件（ZipContent，名称）； }

---

在引擎罩后面，它仍在使用

require

，正如您在

动态导入中看到的那样，动态导入强制同步操作是异步的，这意味着您的返回值都是

Promise

s。。。除非你先开火，然后忘记，这对每个人来说可能都不起作用。