[JS] ES Modules的运作原理

2024-09-16 01:24 由 feixianxing 发表于 #前端开发

ESM 通过 import 语句引入其它依赖，通过 export 语句导出模块成员。

在浏览器环境中，<script> 可以通过声明 type="module" 将一个 JS 文件标记为模块，带有 type="module" 声明的<script> 类似于启用了 defer，脚本文件的下载不会阻塞HTML渲染，代码内容会被延后执行。

这篇文章仅讨论浏览器环境下的 ESM。

概括

ES模块的加载主要分为三个步骤：

构建 Construction：
- 找到入口文件；
- 根据import语句递归构建依赖图；
- 下载模块脚本文件，并文件转换为 Module Record。
实例化 Instantiation：
- 为模块导出的成员申请内存空间；
- 建立import和export之间的链接；
求值 Evaluation：
- 运行模块代码；
- 向内存中的成员填充实际的值。

模块加载过程

步骤1 构建

构建过程的作用在于：构建依赖图，以及了解各个模块之间import/export的成员（静态）。

路径解析与文件下载

在代码中我们使用的模块通常是相对路径，path resolver负责将相对路径转换为文件的绝对路径，从而可以让浏览器去下载模块文件。

转换为模块记录

当模块文件下载到浏览器本地之后，浏览器会对模块文件进行静态解析，从模块代码文件总结出一个模块记录(Module Record)，可以理解为是模块的元数据。

一个模块记录大致包含了如下信息：

模块文件的源代码，以及根据源代码构建的 AST；

该模块依赖的其它模块；

从其它模块分别导入了哪些成员。

缓存机制

在浏览器中，一个标签页会维护一个模块缓存映射表，它的 key 是模块解析后的实际路径，它的 value 是模块记录（Module Record）。

当模块文件的路径被解析完成之后，它就会被添加到缓存中，而在“完成路径解析”和“转换为模块记录”这段时间内，它的 value 会被标记为 fetching。

递归

场景描述：

用户访问 https://www.example.com/index.html，返回的 HTML 文件包含模块入口脚本文件

<script src="main.js" type="module"/>

相对路径main.js被解析为绝对路径 https://www.example.com/main.js，然后浏览器开始下载文件（此时这个模块路径已经被记录到缓存了，标记为 fetching）；
文件下载到浏览器本地之后，静态解析代码，捕获import语句（import语句会被默认提升到代码顶部），解析结果得到模块记录（Module Record），模块记录会被更新到缓存里；
模块记录包含依赖的其它模块，此时浏览器会递归地解析它们的路径，并下载它们的脚本文件（由上图红色箭头标明）。

在这个过程中，网络请求下载脚本文件占据了大部分的时间开销。

复杂的依赖关系可能导致初始化构建过程过久，影响首屏时间。

常用的优化手段是使用动态import，在运行时按需引入指定的模块。

动态加载

语法

import('./dynamic-module.js').then(module => {
    console.log(module.default);
    console.log(module.xxx);
});

import(`./module-${moduleName}.js`).then(module => {
   // ... 
});

import函数的参数是模块的文件路径，返回一个 Promise 对象，通过 then 方法可以获取到模块对象。

模块对象包含模块导出的成员，默认导出使用default属性获取。

应用场景：

模块懒加载，优化首屏时间；
根据不同逻辑加载不同的模块，所需的模块是在运行时才确定的。

步骤2 实例化

实例化的主要作用是为模块的state分配内存空间，此时仅作内存的分配，state的值在这一刻还不确定。

浏览器会以 深度优先，后序遍历 的方式遍历依赖图，为每一个模块 export 的成员分配内存空间。

当模块的所有 export 完成内存分配之后，会开始将 import 链接到相应的内存地址。

这意味着 export 导出的成员和 import 引入的成员指向同一处内存空间。基础数据类型也是如此。

特点：

模块内部更新 state，外部的state 也随之变化（因为它们指向同一块内存）；
模块导出的 state 是只读的。

这种现象和 CommonJS 存在很大区别，CommonJs 在导入模块成员的时候，是对模块的导出进行了拷贝。

这意味着在使用模块导出的 state 时，要注意其数据是否是最新的，因为模块内部和外部的 state 是相互独立的，内部更新 state 并不会影响到外部的 state。

不过这种情况一般比较少发生，我们很少直接导出一个基本数据类型，而是导出一个对象，对象内部再记录这些基本数据类型。由于导出的是对象，只要模块内部不要直接覆盖整个对象，而是对对象的属性进行更新，就不会有太大问题。

步骤3 求值

步骤1和2完成之后，模块的成员已经完成了内存的分配，以及 import/export 之间的链接。

最后需要完成的，就是运行模块代码，并将成员的值填入先前分配的内存中。

模块代码中可能存在一些带有副作用的代码，为了避免每一次执行都会导致模块的 exports 发生变化，模块代码只会被执行一次。

循环依赖

循环依赖是所有模块化方案都要讨论的问题。

案例

实际项目中，依赖图是很复杂的，导致循环依赖的环可能包含了许多模块。这里仅讨论最简单的情况，即两个模块相互依赖对方。

CommonJS

假设main.js是入口文件。

main.js

const num = require('./a.js');
console.log(num);
exports.message = 'main';

a.js

const { message } = require('./main.js');
module.exports = 123;
setTimeout(()=>console.log(message), 0);

我们期待在main.js中输出的num为123，而在a.js中输出的message为 main；而实际运行结果是：

123
undefined

CommonJS 的 require 函数是同步地加载模块，并且一次性完成，不像ESM分为三个步骤。

如上图，当代码执行到 ① 时，执行require函数，解析路径、记录到缓存中、读取模块文件、执行模块代码（步骤②）。

由于 CommonJS 的同步特性，它不能直接运行于浏览器环境，这里讨论的 Node.js 环境下的模块加载。

在执行步骤②的过程中，main.js导出的成员还没有赋值，此时的module.exports是一个空对象。

但是由于 CommonJS 是在模块的路径解析阶段就记录了缓存，因此步骤②的require函数可以得到模块main.js的module.exports，只不过此时的module.exports还是空对象。

由于它此时还是空对象，因此解构赋值出来的message是undefined。

我们期待等步骤③这些同步代码执行完成之后，message应该就会更新为main了，于是我们在a.js中，使用setTimeout来将任务推入宏任务队列中，延后执行。

但结果是，尽管main.js中的message被赋值了，a.js中的message也不会被更新。这是因为在导入的时候进行了拷贝，所以两个message是相互独立的。

ESM

main.js

import num from './a.mjs';

console.log(num);

export const message = 'main';

a.js

import { message } from "./main.mjs";

export default 123;

setTimeout(()=>console.log(message), 0);

由于 ESM 的 import/export 是被链接到同一块内存区域的，因此当 main.js 赋值message之后，a.js中的message 也会更新为 main。

输出结果：

123
main

在浏览器环境下，为了使用 ESM 语法，入口脚本文件需要标明 type="module"。

在 Node.js 环境下，为了表明文件是使用 ES 模块化语法，需要将文件后缀改为 .mjs，或者在 package.json 中配置 type 为 module。

总结

ES Modules (ESM) 是一种现代模块化方案，具备以下特点和优势：

模块化声明：
- 使用 import 和 export 语句实现模块的引入与导出。
- 在浏览器中通过 <script type="module"> 标签加载，不阻塞 HTML 渲染。
加载过程：
1. 构建：递归构建依赖图并下载模块。
2. 实例化：为导出的成员分配内存空间，建立 import 和 export 的链接。
3. 求值：运行模块代码，填充内存中的成员值。

与 CommonJS 对比：

特性	ESM	CommonJS
加载方式	异步加载，不阻塞渲染	同步加载
导入成员机制	共享同一内存空间，实时更新	拷贝机制，数据独立
浏览器支持	原生支持 `<script type="module">`	仅支持 Node.js 环境

优势：
- 原生支持 动态加载。
- 解决 循环依赖 问题，确保模块成员实时更新。

引用

[1] ES modules: A cartoon deep-dive - Mozilla Hacks - the Web developer blog