一、前言
本文基于开源项目：
广东靓仔前阵子在umi 3.5 版本发布的第二天就对自己之前业余时间弄的小项目进行了升级，启动速度确实快了很多，不过也还没达到3s，可能是靓仔项目安装了一些第三方包吧。热更新速度确实快了不少。
广东靓仔当然也是想体验下启动3s的效果，所以从Github找了antd-pro项目，进行了升级，效果确实如成哥说的那样。
等确认umi3.5稳定后，广东靓仔尝试了下把公司自己负责的umi项目进行了升级尝试，遇到了点问题，与成哥简单聊了两句，大概知道问题。
下面听广东靓仔徐徐道来～
二、Umi是啥
“乌米” 可以作为企业级的前端应用框架。以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期。
乌米也有一些限制：
- 不支持 IE 8 或更低版本的浏览器
- 不支持 React 16.8.0 以下的 React
- 不支持 Node 10 以下的环境中
- 不适合有很强的webpack 自定义需求和主观意愿
- 不支持需要选择不同的路由方案
广东靓仔日常也有使用umi来开发项目，开发体验还是很丝滑的，虽然整体感觉有一点点重。
三、antd-pro升级umi3.5
项目目录结构
├── config # umi 配置，包含路由，构建等配置 ├── mock # 本地模拟数据 ├── public │ └── favicon.png # Favicon ├── src │ ├── assets # 本地静态资源 │ ├── components # 业务通用组件 │ ├── e2e # 集成测试用例 │ ├── layouts # 通用布局 │ ├── models # 全局 dva model │ ├── pages # 业务页面入口和常用模板 │ ├── services # 后台接口服务 │ ├── utils # 工具库 │ ├── locales # 国际化资源 │ ├── global.less # 全局样式 │ └── global.ts # 全局 JS ├── tests # 测试工具 ├── README.md └── package.json
升级也很简单，操作如下：
在config文件增加如下配置：
export default defineConfig({ mfsu : {} webpack5: {}, dynamicImport: {}, })
使用 webpack 5 代替 webpack 4 进行构建。物理缓存功能默认开启，可通过设置环境变量 WEBPACK_FS_CACHE 为 none 来禁用。
mfsu开启该功能将会自动开启 webpack5 和 dynamicImport。
mfsu部分子属性：
mfsu: { development : { output : "./.mfsu-dev", }, production : { output : "./mfsu-prod", } },
启动截图
四、公司umi项目遇到的问题
广东靓仔经过自己业余时间弄的小项目以及antd-pro两个项目升级umi3.5成功后，尝试对公司自己负责的umi项目进行升级，遇到了如下问题：
1、在config设置了相关配置后，启动项目报了dumi-theme错误，广东靓仔对主题进行了版本升级，踏过第一关。
2、当项目启动到99%，报错如下：
×Unhandled Rejection (ReferenceError): __WEBPACK_EXTERNAL_MODULE_react__ is not defined
由于要赶项目进度，广东靓仔就没深入去排查。不过根据以往经验，大概猜测有四个方面可能会引起：某些文件render函数的分割符语法、热更新配置、主题设置、还不支持某些第三方库（一般删除里面的node_modules即可）
有遇到类似问题的欢迎找广东靓仔交流，后面有空再继续研究
五、什么是module federation
module federation 是 webpack5 提出的新特性，为了解决独立应用之间代码共享问题。主要是使用于微前端场景，但不仅限与此。我们简单理解为模块联邦，联邦的含义是：我可以通过一个个分散的联邦，组合成一个强大的帝国。所以在 webpack 的模块联邦里，每一个应用可以对外暴露自己的一些组件，供其他应用使用。
简单配置如下：
plugins: [ new ModuleFederationPlugin({ name: 'empBase', library: { type: 'var', name: 'empBase' }, filename: 'emp.js', remotes: { app_two: "app_two_remote", app_three: "app_three_remote" }, exposes: { './Component1': 'src/components/Component1', './Component2': 'src/components/Component2', }, shared: ["react", "react-dom","react-router-dom"] }) ]
五、提升项目启动速度一些尝试
广东靓仔在项目启动提速，做过如下一些尝试：
试过使用vite2.0+react结合antd开发小应用也试过vite2.0+vue3.0开发小应用当然
也试过umi3.5+antd-pro
正如成哥说的那样：
面对越来越复杂的需求、越来越臃肿的项目和早点回家陪老婆孩子的迫切愿望，webpack 慢已经成了前端研发的切肤之痛。
广东靓仔觉得我们可以尝试给项目提提速，有小伙伴开玩笑说：快到没时间点开技术文章了～
五、总结
我们应该保持对前端技术的学习热情，及时更新自己的知识库，一些有意思的技术冒头的时候，可以稍微关注下，说不定后面成为主流技术，刚好提升自己竞争力。
