搭建体系的模块依赖关系与 import maps
我是淘系前端搭建服务团队的步天，目前负责建设天马搭建服务和斑马搭建平台，既提供通用的搭建服务，也提供直接可用的搭建产品。在开始之前，先介绍一些下面会提到的名词，有助于更好的理解：
搭建：可以给到非技术同学，通过拖拽、配置的方式，产出页面来运作自己的业务
模块：搭建操作的最小单位
天马：淘系搭建服务团队建设的，面向阿里内部多个 BU 提供服务的搭建中台，可以协助业务快速构建一个业务搭建系统
我们在去年4月分享过《淘宝前端在搭建服务上的探索》，介绍很多淘系搭建在过去发生的变化，以及为什么会有天马这样的搭建服务。
今年的4月分享了《淘系前端搭建服务在2020年有哪些变化》，介绍了在搭建体系比较完整的情况下，我们在 2020 年又做了哪些事情来提升用户的体验。
在阅读本文之前，推荐先阅读以上两篇文章，对搭建体系有一些更多的了解。本篇文章会和前面两篇文章不同，会专注于讨论搭建体系下，模块依赖关系的处理以及未来如何标准化的思考上。
虽然现代的浏览器性能已经基本不输原生客户端，但真正跑在浏览器上的页面却依然有比较多的体验问题，其中加载性能长时间处于最大问题之列。其中很大一部分原因是渲染页面时依赖的文件都需要远程下载，这个也是 Web 区分于 Native 最大的差异。
为了提升加载性能，从社区规范上，经历了几个阶段：
从纯 script 标签组织加载顺序到开始使用 CDN combo 功能。
从没有模块规范到出现了 CommonJS 模块规范，可以同步加载模块。
由于浏览器远程下载文件的特性，出现了 AMD 模块规范，可以声明异步的依赖关系。
异步加载性能依然受限于浏览器并发请求数、调试困难等问题，开始出现了打包成单文件的方案（Dojo、Webpack）
随着 Web 复杂度的上升，以及 ES Module 标准、import maps 规范出现，开始出现 bundless 的方案，解决开发时构建效率以及面向标准运行的问题。
而天马 seed 模块规范源自 KISSY，本身沿用了 AMD 的思路，最后采用了 CMD 的规范（因为产物生成逻辑更简单），在搭建的动态化背景下，保留了模块化开发和运行的方式。天马模块和市面上的大部分搭建、低代码体系不一样的地方：
模块化开发，统一并隐藏了基础的构建逻辑，公共依赖自动去重，开发者基本上不需要关注构建过程。
页面的发布没有构建过程，用户访问时渲染，支持大批量页面同时修改。
页面之间发布独立，模块版本更新可以细粒度到单个页面生效。
但这套规范运行5年下来，也遇到了比较多的问题，我们在接下来与 import maps 规范的对比中，来讲讲天马模块规范和社区标准衍进的差异。
seed 是天马模块中描述依赖关系的文件，类似 Webpack Dependency、SystemJS depcache，在天马体系里，这个文件会给到渲染引擎以及浏览器端直接执行。seed 这个词来源于 YUI 体系，seed 规范本身沿用了很多 KISSY seed 的描述方式。我们内部自研了 feloader 加载器（这部分也继承了 KISSY loader 的实现）来支持 seed 格式的解析和模块的加载与执行。
引入和使用
seed
引入 feloader 加载器，会在全局环境下注册 require 和 define 方法。
配置依赖关系。
加载 seed 里配置过的模块。
<script src="feloader.js"><script/><script>require.config({"packages": {"example-1": {"path": "/example-1/"}}});require(['example-1/index'], function(Example) {// do something.});</script>
import maps
声明 importmap 配置
用浏览器提供的 import 方法加载配置过的模块
注意：下面只是一个范例，展示了 import maps 的使用方式。目前规范下，因为暂无合适的配置合并策略，所以一个页面只能设置一次 importmap。
<script type="importmap">{"imports": { ... },"scopes": { ... }}</script><script type="importmap" src="import-map.importmap"></script><script>const im = document.createElement('script');im.type = 'importmap';im.textContent = JSON.stringify({imports: {'my-library': Math.random() > 0.5 ? '/my-awesome-library.mjs' : '/my-rad-library.mjs';}});document.currentScript.after(im);</script><script type="module">import 'my-library'; // will fetch the randomly-chosen URL</script>
方案对比
设置方式
首先，seed 是一个相对灵活的设置方式，在脚本执行的任何阶段都可以动态修改模块的配置，模块在加载完成后，依然可以重置模块状态，并重新加载。
而 import maps 会更严格：
importmap 文件需要用 script + type="importmap" 的方式加载，虽然是 json 文件，但是浏览器会自动解析，所以 importmap 文件需要在调用 import 的脚本之前加载，并且加载过程是阻塞性的。
一个页面只能加载一次 importmap，多 importmap 还在讨论中。在开始加载脚本之后，增加新的 importmap 文件会直接报错，并且无法生效。
只能用 type="importmap" 来加载 importmap 文件，MIME 类型需要是 application/importmap+json（需要支持 CSP，普通 JSON 文件不需要）。
在这些限制下，我们就无法和 Node.js 环境一样，每个外部库都可以自己管理自己的依赖。而是需要从完整页面的视角，统一管理页面上用到的所有依赖，外部库应该只负责 import 就可以了。也就是如果页面上加载了一个远程的 CDN 外部库，开发者还需要关注这个外部库依赖了哪些其他外部库，并在 importmap 文件里声明清楚。这部分对于开发者实操来说很难，毕竟大部分开发者还是喜欢拿来即用，并不关注外部库做了什么。
理论上，无论用 seed 还是 import maps，开发者都应当知道页面有哪些外部依赖，并合理升级。npm 模式提供了一个较为宽松的版本化依赖方式，但在 Web 上并不一定适用。其中最大的差异是，Node.js 应用是在打包部署的时候，就把版本确定下来了，在下一次重新部署前，依赖版本是不会变化的，而 Web 页面是在用户侧，每次访问的时候重新组织，语义化版本带到 Web 页面渲染的时候并不合适，带来了太多不确定性，所以个人觉得 Airpack 是很好的方案，但用起来可能比 npm 会有更多的问题。大部分同学还是习惯了，拿来即用
目前标准推荐用行内的方式加载 importmap 文件，性能最佳，如果用外链的方式，由于页面上的脚本都需要等待 import maps 配置完成才能执行，那么只能用 HTTP/2 Push 或者 Web Bundle 来节省下载耗时。其实从 Web 标准上，css 样式表也是推荐用行内的方式加载的，虽然 css 文件不阻塞资源加载，但依然会阻塞元素的展示，毕竟浏览器总不能先展示没有样式的 HTML 元素，然后等 css 文件加载完了再把样式重新渲染上去。
支持 Package
为了缩减依赖配置的体积，减少重复的路径声明，seed 格式是由 packages 和 modules 组成的。packages 用于声明模块的目录，modules 用于声明模块间的依赖关系。同时 packages 上可以配置更多的信息，比如 CDN combine 的时候，是否需要独立的 script 标签，这样可以控制 script src 地址的组合，实现跨页面的脚本缓存共享。
{"modules": {"example-1/index": {"requires": ["example-1/utils"]}},"packages": {"example-1": {"path": "/example-1/"}}}
import maps 规范也有 packages 的概念，用 “/” 结尾与模块进行区分。配置 packages 的方式可以支持子文件方式的 import。
<script type="importmap">{"imports": {"moment": "/node_modules/moment/src/moment.js","moment/": "/node_modules/moment/src/","lodash": "/node_modules/lodash-es/lodash.js","lodash/": "/node_modules/lodash-es/"}}</script><script type="module">import moment from "moment";import _ from "lodash";import localeData from "moment/locale/zh-cn.js";import fp from "lodash/fp.js";</script>
作用域和大版本不兼容设置
由于前面 import maps 要求页面统一管理依赖，但是实际情况下，同一个外部库在页面上只有一个版本还是比较理想的情况。那么 import maps 是支持了通过设置作用域的方式，让不同文件可以加载的外部库的不同版本。
{"imports": {"querystringify": "/node_modules/querystringify/index.js"},"scopes": {"/node_modules/socksjs-client/": {"querystringify": "/node_modules/socksjs-client/querystringify/index.js"}}}
seed 规范下目前还没有支持作用域，一方面是同个外部库不同版本加载两遍带来的体验问题，另一方面也是对开发者做好依赖管理的要求。目前对于 npm 上允许大版本（x位）不兼容的情况，我们的解决方案是把大版本号放到模块名上，实际使用的时候就是两个模块了。比作用域的方式更加简单，不过依赖工程链路来做模块名的转换，带来了一定的复杂度。
{"packages": {"example-1@1": {"version": "1.0.1","path": "/example-1/1.0.1/"},"example-1@2": {"version": "2.0.2","path": "/example-1/2.0.2/"}}}
依赖模块的下载
seed 机制下，最重要的其实是依赖包的加载能力。一个模块可以声明依赖，类似 npm 的 dependencies，然后在加载模块的同时，会并发下载所有的依赖，包括依赖的依赖，确保模块可以正常执行。
比如在下面的例子里，加载 index 模块的同时会加载和执行 utils 和 tools，最后执行 index。
{"modules": {"example-1/index": {"requires": ["example-1/utils","example-1/tools"]}}}
seed 机制支持了 CDN combo，多个依赖的下载合并到一个 script 请求后，大部分情况下速度会比多个并发更快一些。具体还是要看场景，毕竟不做 combo 的话，跨页面之间可以自然共享脚本缓存。
import maps 目前还没有支持类似的依赖下载方式，这样就意味着，存在串行下载依赖的情况，目前 Webpack Module Federation 也有类似的问题，不过至少不是一个一个串行加载的。
SystemJS 内部有增加类似 requires 的实现，目前还在讨论阶段，用法如下：
<script type="systemjs-importmap">{"imports": {"dep": "/path/to/dep.js"},"depcache": {"/path/to/dep.js": ["./dep2.js"],"/path/to/dep2.js": ["./dep3.js"],"/path/to/dep3.js": ["./dep4.js"],"/path/to/dep4.js": ["./dep5.js"]}}</script><script>setTimeout(() => {System.import('dep');}, 10000);</script>
因为提前声明了 depcache （requires），就可以提前并行加载所有依赖的文件，省去了串行等待环节，只要加载器支持就好了。
关于 seed next
回想前面几年，我们尝试了很多方案想把 seed 模块化的体系改造到更贴近 Bundle 的方式，包括合并多个页面等等偏模板的方式，让模块搭建的页面接近源码开发的页面。但有一些问题始终很难解决：
如果每次发布都需要打包，生效速度和页面数量上存在比较大的问题。
如果合并多个页面作为一个源码模板，那么首屏资源无法精准计算，影响用户体验。
绕了一圈之后，发现 import maps 还是带来了不一样的思路，模块化的方式还是可以长期在 Web 下推进下去的。
面向未来的话，一方面需要考虑将 CMD 规范升级到 ES Module 上，需要考虑好降级方案和 CommonJS 依赖的处理。另一方面更重要的是需要推进一套更加规范的依赖加载方式，这个加载方式需要结合 CDN combo，异步并发下载依赖，客户端 native cache，PWA，Server Push，甚至浏览器实验功能预测加载 JavaScript 文件等等，针对的不同的场景，给到不同的加载方案。渐进增强，平稳退化应该是前端的强项。目前这部分还是会继续在内部的 feloader 上拓展，未来会考虑和 SystemJS 有更多的结合。
资料参考
《github/import-maps》
《W3C import maps 草案》
《SystemJS 支持的 import-maps》
《import maps需要支持 CSP》
《import maps 支持 depcache 提案》
《KISSY config》
《YUI Loader》
关注「Alibaba F2E」微信公众号把握阿里巴巴前端新动向