umi项目升级那些事
共 5628字，需浏览 12分钟
·
2021-07-12 10:49
本文适合对前端新技术、技术框架升级感兴趣的小伙伴阅读。
如果这篇文章对你有帮助，欢迎关注前端早茶，与广东靓仔携手共同进阶～
作者：广东靓仔
一、前言
本文基于开源项目：
https://github.com/umijs/umi
https://github.com/ant-design/ant-design-pro
广东靓仔前阵子在umi 3.5 版本发布的第二天就对自己之前业余时间弄的小项目进行了升级，启动速度确实快了很多，不过也还没达到3s，可能是靓仔项目安装了一些第三方包吧。热更新速度确实快了不少。
广东靓仔当然也是想体验下启动3s的效果，所以从Github找了antd-pro项目，进行了升级，效果确实如成哥说的那样。
等确认umi3.5稳定后，广东靓仔尝试了下把公司自己负责的umi项目进行了升级尝试，遇到了点问题，与成哥简单聊了两句，大概知道问题。
二、Umi是啥
不支持 IE 8 或更低版本的浏览器
不支持 React 16.8.0 以下的 React
不支持 Node 10 以下的环境中
不适合有很强的webpack 自定义需求和主观意愿
不支持需要选择不同的路由方案
三、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
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"]
})
]
五、提升项目启动速度一些尝试
面对越来越复杂的需求、越来越臃肿的项目和早点回家陪老婆孩子的迫切愿望，webpack 慢已经成了前端研发的切肤之痛。
广东靓仔觉得我们可以尝试给项目提提速，有小伙伴开玩笑说：快到没时间点开技术文章了～
五、总结
关注我，一起携手进阶
如果这篇文章对你有帮助，欢迎关注前端早茶，与广东靓仔携手共同进阶～