性能

一些第三方的 ES 模块构建作为许多单独的文件相互导入。例如: lodash-es 有超过 600 个内置模块！当我们执行 import { debounce } from 'lodash-es' 时，浏览器同时发出 600 多个 HTTP 请求！尽管服务器在处理这些请求时没有问题，但大量的请求会在浏览器端造成网络拥塞，导致页面的加载速度相当慢。

这里缺一张图

尽请期待...

ESM 模块在浏览器中的加载机制

在开发中, 为了更好的维护代码, 我们会将会进行函数柯里化、 模块化、 和一些公共方法的抽取进行复用, 在一个ESM 的模块中导入了 N 个其它模块, 在导入的 N 个模块中引又分别引入了 N 个模块, 如果将一万行代码分别拆分成30 个小模块进行维护, 分别向需要的模块中进行导入, lodash-es 就是这样的情况, 其实往往在开发中我们避免不了这种情况,当请求到导入的模块时, 也会依次加载导入模块中所有的导入模块, 直到最后的文件没有任何存在的导入模块。

提示

导入即加载, 在文件内部通过 import 导入模块, 无论是动态分配, 还是按名称导入, 即使没有执行或者使用此导出内容, 也将被浏览器进行模块加载。

Stalled（阻塞）

浏览器对同一个主机域名的并发连接数有限制, Chrome 就有六个或者多个并行连接线程, 其余的多个请求将会进行等待, 连接线程的切换和创建也会造成一定的时间消耗, 这样会导致网络拥塞。