ES Module原理详解

最新推荐文章于 2024-06-02 11:09:45 发布

goodlovingz

最新推荐文章于 2024-06-02 11:09:45 发布

阅读量4.9k

点赞数 6

分类专栏：前端文章标签：前端 ESM ES Module 模块化

本文链接：https://blog.csdn.net/qq_31967985/article/details/124786887

版权

前端专栏收录该内容

41 篇文章 7 订阅

订阅专栏

ES Module原理详解

ES Module 系列：

一、ES Modules如何工作

当前，在浏览器中通过 <script type="module"> 已原生支持 ESM。以vite创建的Vue3项目为例：

// index.html文件
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>xxxx</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>

其中/src/main.ts是Vue3的入口文件。

注意：浏览器中ES Module是异步加载，不会堵塞浏览器，即等到整个页面渲染完，再执行模块脚本。如果网页有多个ESM，它们会按照在页面出现的顺序依次执行。

流程简析

1、创建AST

当使用ES Modules进行开发时，实际上以入口节点为根节点（如main.js）创建出一张依赖关系图。不同依赖项之间通过export\import语句来进行关联。

2、生成 Module Record

浏览器无法直接使用文件本身，但是浏览器会解析这些文件，根据 import/export 语句构成模块记录(Module Record)，每个模块文件对应生成一个 Module Record，记录当前模块的信息：

3、转化 Module Instance

模块记录转化为模块实例，浏览器最终能够读取也就是Module Instance。

二、模块加载

模块加载的过程就是从入口文件到拥有一个完整的模块实例图的过程，对于 ES Module 来说，分三步进行：

构造：查找、下载并解析所有文件到模块记录中。

实例化：在内存中寻找一块区域来存储所有导出的变量（但还没有填充值）。然后让 export 和 import 都指向这些内存块。这个过程叫做链接（linking）

求值：在内存块中填入变量的实际值。

1、构造

在构造阶段，每个模块都会经历三件事情：

查找：找出从哪里下载包含该模块的文件（也称为模块解析）；

通常会有一个入口文件，然后通过import代码去寻找与之关联的其他模块，形成一个依赖关系树（AST）；
下载：获取文件（从 URL 下载或从文件系统加载）；

解析文件前，需要一层一层地遍历树，找出它的依赖项，然后找到并加载这些依赖项；
解析：将文件解析为模块记录；

把解析出来的模块构成表称为 Module Record （模块记录）。

Module Record 包含了当前模块的 AST，引用了哪些模块的变量，以及一些特定属性和方法。

一旦 Module Record 被创建，它会被记录在模块映射Module Map中。被记录后，如果再有对相同 URL 的请求，Loader 将直接采用 Module Map 中 URL 对应的Module Record。

在构造过程结束时，从主入口文件变成了一堆模块记录Module Record：

2、实例化

实例化阶段：将构造的模块实例化并将所有实例链接在一起。

模块实例包含两部分：代码、状态。

状态存在于内存中，因此实例化步骤就是写入内存。

首先，JS引擎创建一个模块环境记录(Module Enviroment Record)来管理 Module Record 的变量。然后它在内存中找到所有导出内容对应的位置。模块环境记录将跟踪内存中导出内容对应的位置与导出内容间的联系。

此时内存中的这些位置中还不会存放值，只有在计算后才会有值。

注意，导出和导入都指向内存中的同一位置。首先链接导出，可确保所有导入都可以链接到匹配的导出。

ES Module 的这种连接方式被称为 Live Bindings（动态绑定）;

ES 模块使用称为动态绑定的东西。两个模块都指向内存中的相同位置。这意味着当导出模块更改值时，该更改将显示在导入模块中。导出值的模块可以随时更改这些值，但导入模块不能更改其导入的值，虽然有此限制，但是如果一个模块导入一个对象，导入模块中可以更改该对象上的属性值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-luLYO6K6-1652615360924)(http://img.wawow.xyz/imgs/esm5.png)]

拥有这样的动态绑定可以使我们在不运行任何代码的情况下连接所有模块。

实例化结束时，已经连接了export/import变量的所有实例和内存位置。

3、求值

最后一步，在内存区中填充绑定的数据的值。

JS 引擎通过执行顶层代码（函数之外的代码，此处可以理解为模块文件中顶层作用域中的代码）来给内存区的引用赋值。

总结

ES Module执行分为三个阶段：构造阶段、实例化阶段、求值阶段
构造阶段:
- 1、根据入口创建依赖关系的AST;
- 2、下载module文件，用于解析；
- 3、解析每个module文件，生成 Module Record（包含当前module的AST、变量等）；
- 4、将Module Record 映射到 Module Map中，保持每个module文件的唯一性；
构造阶段最后生成根据依赖关系AST的 Module Record的依赖树，同时将每个Module Record映射保存到Module Map中。
实例化阶段：
- 1、生成模每个Module Record的块环境记录(Module Enviroment Record)，用来管理 Module Record 的变量等；
- 2、在内存中写入每个Module的数据，同时 Module文件的导出export和引用文件的 import指向该地址；
实例化阶段确定了 export和import内存中的指向，同时该内存空间中定义了Module文件的变量（但是还未赋值）；
求值阶段：
- 1、执行对应Module文件中顶层作用域的代码，确定实例化阶段中定义变量的值，放入内存中；
求值阶段确定了Module文件中变量的值，由于 ES Module使用的是动态绑定（指向内存地址），export中修改数据会映射到内存中，import数据相应也会改变。