Umi 4 设计思路

1. Umi 4 设计思路云谦（陈成）蚂蚁集团中台前端框架负责人

2. 关于我阿里 & 蚂蚁 10 年 + 老前端，ZJU，Umi & Dva 等开源库作者，蚂蚁中台框架 Owner，「MDH 前端周刊」作者，Webpack 配置「专家」，初级路亚爱好者，游戏收藏师。 https://sorrycc.com

3. Umi 是什么 ?

4. Umi 是什么 • • • • • 蚂蚁集团 / 开源框架 / 基于 React 内部 10000+ 应用 / 社区 25.33% 用户选择 Umi 4 研发中编译时框架 / 插件体系 / 默认快 / 依赖预打包 / ... Webpack & Vite 双构建引擎 / Low Import / ... https://github.com/umijs/umi

5. Umi 是什么 Bigfish 是基于 Umi 的蚂蚁内部中台框架最佳实践 Umi 社区业务和平台 Big sh 开发者

6. All in one 最佳实践强约束 import all from umi 插件体系集中式和组装式依赖预打包约束与开放内外一致 Rich Mode ESM CDN 编译时框架双构建引擎默认快 Low Import Mode

7. 目录 01 02 03 04 编译时框架依赖预打包默认快约束与开放

8. /01 编译时框架

9. 时过境迁相比十年前 ? ⏱ ? ? ? 代码写少了报错提前了产物变小了代码配置化了配置约定化了专注业务，少写很多脚手架代码从浏览器提前到命令行，减少线上故障 tree-shaking、babel- plugin-import、JIT 功能配置化，配置约定华，提升 DX 功能配置化，配置约定华，提升 DX

10. 非编译时框架源码 Webpack

11. 编译时框架语法树源码检测临时文件依赖图谱 ... 编译后源码 Webpack 编译时

12. 社区的编译时 • • • • • Angular 的 AOT 和 JIT prepack solid.js export not found 的编译时和运行时 React Forget (function () { function hello() { return 'hello'; } function world() { return 'world'; } global.s = hello() + ' ' + world(); })(); ↓ ↓ ↓ s = "hello world"; prepack export not found

13. Umi 的编译时 - index.tsx - users.tsx + src/.umi + src - access.ts 约定式权限 + src/models - users.ts - global.ts 约定式数据流约定式国际化 + src/locales - zh-ZN.json - en-US.json

14. One More Thing... Low Import 研发模式 import { useModel } from '@alipay/bigfish';

15. /02 依赖预打包

16. 睡一觉醒来 dev 或 build 跑不起来了啥都没干迭代发布后线上白屏还背了个故障 npm i 时出现某人的求职广告某黑客给某依赖库挂?了 babel 连续发了 8 个 bug x 版本 eslint 规则更新，然后 CI 挂了 ... • • • • • • •

17. package.json 中只有 10 个依赖 https://npm.anvaka.com/#/view/2d/umi-3-3-9

18. semver 的理想与现实理想现实

19. 社区的解 ? ? bug-versions patch-package resolution 配置 package-lock.json cnpm 提供，用于安装时忽略问题库代码层侵入式地修复问题依赖锁定指定依赖的版本锁定全部依赖临时 ? ? ⻓期

20. ? 中间商锁依赖，定期主动更新，并对此负责

21. 框架是开发者的倒数第二道防线

22. 依赖预打包框架的解 webpack 启用前 ? babel dependency ❌ Umi ❌ 用户项目 devDependency ✅ Umi ✅ 用户项目 ... webpack 启用后 ? babel ...

23. 1309 ➡ 314 umi 3.3 vs. umi 3.4

24. 怎么预打包？ HOW NCC 依赖代码打包 https://github.com/vercel/ncc + bundler-webpack + compiled + webpack - index.js - index.d.ts + src - index.js + node_modules + webpack - package.json dts-packer 依赖类型定义打包 https://github.com/sorrycc/dts-packer

25. Father 是基于 Umi 的组件打包方案 One more thing... Father 4 Bundless 内建 3 类 4 种构建核心提供组件 (库) 研发最佳实践支持 2 种构建产物类型支持预编译并打包依赖 babel esbuild Bundle 依赖打包 webpack ncc + dts-packer 工程化能力生成器智能诊断更高效、精准的错误提示灵活组装 test/lint/prettier 等工程能力提供研发最佳实践指引不仅清楚地描述错误、更给出解决方案 ES Module UMD Pre-bundling dist

26. Two more thing... browser 依赖锁 node 依赖

27. /03 默认快

28. Lint 慢用户故事依赖安装慢构建 OOM CI 慢本地启动慢提交慢 node_modules 大测试慢改完代码后热更新慢启动时间热更新时间脚手架 30s 3s 蚂蚁某中后台较慢应用 301s 32s

29. 提速三宝 Src Transpiler: SWC external with umd Webpack 5 物理缓存压缩缓存缓存 babel 缓存 ESM CDN Vite Optmize MFSU 延迟处理基于请求的按需编译延迟编译 sourcemap Native Code JS Mini

30. 提速方案时间线 externals auto externals code-splitting strategy dll NODE_OPTIONS=--max_old_space_size=4096 parcel 2 hard-source-webpack-plugin delay source map fs cache cache-loader swc happypack thread-loader babel cache module.noParse 缓存延迟处理 Native Code esbuild remove Progress Plugin compile on demand vite snowpack rome cheaper source map prefer smaller dependency mfsu esm cdn 昨天今天明天

31. webpack MFSU Module Federation based Speed Up solution ⛹ ? ? 基于 Webpack 1000+ 应用实践快可上生产既要 Webpack 的功能和生态，又要 Vite 的速度蚂蚁集团内网验证数月，默认开启启动快、热更新快、⻚面打开也快除了本地开发快，让 CI CD 流程也快

32. MFSU 效果 webpack MFSU V2 首次启动 MFSU V3 热更新时间 0 二次启动 0 17.5 35 52.5 70 0.75 1.5 2.25 3

33. MFSU 原理 dependency import a from 'a' src { a: {} } babel plugin dep graph dep builder federated dependency modi ed src import a from 'remote/a' webpack / esbuild transformer ModuleFederation plugin { modules: { a } }

34. MFSU 时间线理想现实优化协作 Dep CDN、首次启动快维护成本高、依赖覆盖率看脸本地化、二次启动快、依赖覆盖率 95%+ 首次启动慢、⻚面打开速度看脸首次启动也快、⻚面打开快无在路上 MFSU V1 MFSU V2 MFSU V3 MFSU V4 2020.10 2021.6 2021.12 2022

35. MFSU 使用 1 umi 4 默认开启 mfsu # 两行命令尝鲜 $ npm create umi@next $ npm start 2 基于 @umijs/mfsu，用于任意 webpack 项目

36. MFSU 使用 1 umi 4 默认开启 mfsu 2 基于 @umijs/mfsu，用于任意 webpack 项目 https://github.com/sorrycc/example-webpack-mfsu

37. 多构建引擎 bundler-vite bundler- webpack bundler- esbuild

38. Umi 4 的默认快 src transpiler 可选 swc babel dependency transpiler MFSU esbuild、swc、lite babel javascript mini er esbuild swc、terser、uglifyJs css mini er esbuild dependency precompile esbuild con g & mock le transformer esbuild esbuild jest transformer 默认 cssnano、parcel-css webpack swc、babel ... fast refresh lazy import remote cache code splitting strategy

39. npm 包 dep info cjs 2 esm Dep Analyzer ESMI Clients ESMI Server import maps es-module-shims import maps Umi Client module preload 不支持 IE builder esbuild export 级 bundle esm les 云凤蝶 Client BROWSER CDN HTTP/2 多路复用

40. /04 约束与开放

41. 围城方案太多，怎么选社区内置方案不好，能换吗蚂蚁团队内部

42. 社区要开放，团队要约束

43. 强约束禁止依赖声明能用 * 统一数据流统一图表库统一请求库统一目录结构统一 ESM 模块规范禁止混用 CJS 和 ESM 方案一致性编码一致性统一 TypeScript 安全性强约束规则集禁用 eval、new Function 等禁止依赖声明能用 * 规避常⻅错误禁止使用未定义的变量禁止跨 group 或 page 引用提升可维护性严格模式组件限 600 行禁止三层 ../ 引用文件全量 TypeScript，禁 JavaScript 全量 FC，禁 Class Component server 下发规则强制 tsc 校验

44. Bigfish 是基于 Umi 的蚂蚁内部中台框架一个版本的好处 50 无版本碎片化问题应用治理容易框架升级轻松 37.5 25 12.5 0 Big sh 1 Big sh 2 Big sh 3 Big sh 4 增加「一个版本」规则

45. 集中配置和原子组装集中功能 + 配置 Big 原子功能 + 组装框架提供开发者自定义

46. Bigfish 是基于 Umi 的蚂蚁内部中台框架 One more thing... Big sh 强约束规则集公开 https://www.yuque.com/docs/share/45a14118-c56c-4f27-b1cf-6b200ad4d450 已过滤不适合对外的规则和内容

47. Umi 4 ? ? ⚙ ? ⛹ ? 默认快体系化有体感的快依赖预打包双构建引擎技术栈最新最佳实践 V2 Umi Pro 安全又稳定含 ESMi，面向未来 Webpack 和 React Router 等请求、数据流、国际化等内部 Bigfish 框架对外

48. 谢谢观看