ESM Bundleless 在低代码场景的实践

1. 第十六届 D 2 前端技术论坛 ESM Bundleless 在低代码场景的实践严铭（亦逊）

2. 严铭（亦逊）蚂蚁集团前端工程师负责蚂蚁集团低代码平台-云凤蝶的资产加载体系

3. ESM Bundleless 在低代码场景的实践 ES Module ✅ vs. Bundle ? ???

4. 丰富的 UI 资产写少量代码完成交互智能向导（表格、表单）提供官方存储/模型服务

5. 背景机会与挑战设计思路未来展望

6. 云凤蝶「开放」的资产体系

7. ? 搭建系统的「组件」从哪里来？一套组件库的研本太高了，Ant Design 单个组件的平均成本至少 2 周 ? 珠玉在前，我们有全球最好的组件库！ “要是低代码平台能直接拿过来用就好了”

8. 资产与平台解耦通过规范建立连接云凤蝶打造富有生命力的资产体系云凤蝶方案一：集成、深度绑定管理版本和构建方案二：扩展、动态加载组件规范 Lodash

9. 如何让组件进来 —— NPM 导入

10. Assets CDN module A JS 产物 module B NPM 导入 module B module A module C 拆解依赖递归构建依赖关系询问依赖刚刚发生了哪些事？依赖计算版本合并实时预览访问页面模块装配 A、B、C SystemJS 一次网络请求

11. 依赖分析和二次构建怎么做的？ 1、从 npm registry 下载 @ali/hello-yunfengdie 2、依据 package.json 浅层分析依赖 3、下载依赖，递归执行1 4、Webpack 构建，external 子依赖 @ali/hello-yunfengdie @ali/hello-yunfengdie react antd react-dom @ant-design/icons 最终得到了一颗依赖关系树和一系列 JS 产物

12. Bundleless 资产体系 1.0 完全对接 NPM 生态依赖复用按需加载实时预览 & 调试丰富的资产体系拒绝重复建设遵循 Semver 规则的依赖合并包级别的按需加载秒级部署上线支持 debug 调试

13. 业务上的诉求不够快，资产加载成为性能瓶颈以官方资产 antd 为例的组件使用情况 120 antd.Button antd.Form 90 antd. Menu antd.Table 60 antd.Pagenation 30 在搭建场景中，包级别的按需加载还远远不够… 0 细粒度到组件级别的按需加载才更适合搭建的场景组件个数总体体积实际使用受限于 SystemJS 的性能是否还有更快的加载方案？

14. 技术上的追求不够 modern，无论是模块规范还是加载方案

15. ? 对下一代资产加载方案的憧憬 … 体积组件级别按需加载（Treeshaking） ESM 兼顾生产同时面向未来高性能模块加载方案性能

16. ESM 的机会与挑战

17. ES Module 能够上生产了么？兼容性怎么样？性能如何？能不能解决云凤蝶当前遇到的问题？浏览器 Chrome（60+） Firefox（60+） Safari（10.1+） IE（11）支持度 ✅ ✅ ✅ ❌ 单模块加载 UnCached Cached SystemJS 2334ms 81ms Native Module 1668ms 49ms 93% Browser Support 1.3x ~ 1.5x Faster

18. ES Module 是如何工作的？单个模块已经足够快，但如果依赖复杂了呢？递归的模块解析，带来了请求瀑布的问题由于 import/export 的顺序，无法做 CDN Combo

19. 必要条件面对请求瀑布，HTTP/2.0 是标准答案吗？多路复用（Multiplexing）

20. 展示型的站点 CodeSandbox 等在线 Demo 编辑 … 低代码搭建可以么？？关键词：收敛本地研发 Developer Experience Vite Snowpack … V8 在 2018 年对使用 ES Module 的性能建议 https://github.com/GoogleChromeLabs/samples-module-loading-comparison 小型 Web 应用模块数量 < 100 && 依赖层级 < 5

21. ESM Bundleless 设计思路

22. 01 Bundleless 粒度 ESModule antd antd es/index.js rc-button es/button/index.js rc-menu es/table/index.js rc-table rc-table/es/index.js … @babel-runtime/esm 文件级别的粒度 classnames 大/多的取舍 rc-util @babel-runtime/esm 包级别的粒度 ESModule

23. 导出级别的依赖分析 02 TreeShaking 在 Bundleless 方案中尤为重要 ExportNamedDeclaration ImportDefaultSpeci er ImportNamespaceSpeci er AST 分析 npm 导出 ExportDefaultDeclaration 每个导出独立分析依赖 ImportSpeci er ExportAllDeclaration Dynamic Import

24. 02 导出级别的依赖关系结构

25. 03 依赖合并 & 二次构建策略

26. 03 依赖合并 & 二次构建策略 @ali/hello-yunfengdie 组件：Foo TreeShaking 的依赖合并降低了复杂度

27. 03 依赖合并 & 二次构建策略 e.g.「孤立节点」可以直接 Bundle e.g. 所有导出的公共依赖可以 Bundle

28. 04 import map 最后一公里 Uncaught TypeError: Failed to resolve module speci er "react". Relative references must start with either "/", "./", or "../". at <anonymous>:1:15 显式文件引用的问题在于它们与带有 hash 标记的文件缓存绑定，不能精准更新有变更的依赖。

29. 预加载 modulepreload（额外 Bu ） modulepreload 大幅度地改善加载时间（1.3x ~ 1.5x） 05

30. 未来展望

31. 畅想未来的研发方式会是怎么样的？ ESM First 社区标准、Treeshaking Bundleless / NoBundle 真正的混合研发 LowCode ❤ ProCode 浏览器、5G、HTTP X 缓存不仅限于 DSL 互转和微前端天然的依赖复用

32. 快速制作高品质的中后台应用谢谢聆听个人微信：amazingym