前言

自 2018 年 5 月 Firefox 60 发布后，所有主浏览器均默认支持 ES modules。借助 ES modules 的能力，代码可以实现无需构建直接运行。

随着 Vite 和 Snowpack 等基于 ES modules 的构建工具的产生，前端随即掀起了 ES modules 新一轮热潮。

问题背景

天下武功，无招不破，唯快不破 - 李小龙

Vite、Snowpack 等基于 ES modules 的构建工具带来了开发的极致体验，相比传统的构建工具，这些新型的构建工具或多或少地带来了以下优势：

• • 由于无需打包的特性，服务器冷启动时间超快**

借助 ES modules 的能力，模块化交给浏览器处理（虽然目前的阶段存在一个预编译的过程）。传统构建器需要打包依赖和源码，才能构建整个应用，并提供服务。

• 项目大小不再成为限制项目热更新速度的因素

传统构建器在代码更改时，需要重新构建并载入页面，这样带来的的结果是：随着项目体积增长，构建耗时越长。基于 ES modules 的构建器只进行单文件编译，单文件更新，时间复杂度保持 O(1).

Vite 得益于原生 ES modules 的能力，大幅提升了开发时体验。相信未来，随着社区生态（CDN 服务、Deno）、ESM 相关标准（import-maps、import.meta）的逐步完善，以及越来越多的技术方案解决 ES modules 在浏览器端的相关难题（依赖瀑布，资源碎片化），前端会开启一个无构建的新篇章。

同时在微前端领域，脚本资源的打包规范向来是百花齐放（比如 singleSPA 默认支持 SystemJs 规范，icestark 默认支持 UMD 规范）。未来脚本资源的打包规范必定是趋于统一的 ES modules 规范。正是基于这两个原因，微前端支持 ES modules 应用的加载就成了用户强诉求。

微前端加载 Vite 应用

加载 ES modules 微应用

Vite 会默认打包出符合标准的 ES modules 的脚本资源。ES modules 资源的加载方式如下：

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