当前问题
现在编译时间过长,镜像构建时长就达到了20分钟
通过项目依赖升级后,镜像构建时长大约3-5分钟
修改内容
之前的技术方案:roadhog(2.x) antd(3.x) React(16.x) dva(2.x)
现在的技术方案:[Create React App]craco(7.x) antd(5.x) React(18.x) react-redux(9.x) react-router(6.x)
roadhog(https://github.com/sorrycc/roadhog)已经是2018的技术了,很久没有维护了,并且随着技术的发展,其他第三方包的依赖要求也发生改变,需要修改更多的webpack配置来适应,但是roadhog暴露的配置入口比较少,很多配置无法设置,它自己也升级到了umi(https://github.com/umijs/umi)
antd3.x中的Form组件使用比较麻烦,dva也有相同的问题
下面是一个使用dva Form的组件导出时的配置
代码语言：javascript复制export default connect(({ user, moon }) => ({ user, moon }))(Form.create()(RecordList));
所以使用新版antd redux来进行替换
项目结构
代码语言：javascript复制src
├── assets #静态文件(样式,图片等)
├── base-ui #基础的组件(整体布局等)
├── components #公共的组件
├── hooks #钩子函数
├── router #路由
├── services #接口
├── store #redux数据
├── utils #通用函数
└── views #业务组件
破坏性修改
Antd
Form
导出
代码语言：javascript复制export default Form.create()(RecordList); // 修改前
export default RecordList; // 修改后
使用
代码语言：javascript复制const { form } = props; // 修改前
const [form] = Form.useForm(); // 修改后
html部分
修改前
代码语言：javascript复制const { getFieldDecorator } = form;
<Form.item label="版本">
{getFieldDecorator('version', { rules: [{ required: true, message: '请输入版本！' }]})(
<Select allowclear="{true}" onselect={(select) => { setVersion(select); }} > {versionList.map((item) => ( {item} ))} </Select> )}
</Form.item>修改后
代码语言：javascript复制 <Form.item label="版本" name="version" rules=[{ required: true, message: '请输入版本！' }]>
<Select allowclear={true} onselect={(select) => { setVersion(select); }} > {versionList.map((item) => ( {item} ))} </Select>
</Form.item>
router
路由使用react-router
跳转页面
代码语言：javascript复制import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(URL); // URL要跳转的地址
查看当前url
代码语言：javascript复制import { useLocation } from 'react-router-dom';
const location = useLocation();
location.pathname
地址解析1
地址:
/flow/repeateDetailPage?appName=designer-outer-circle&traceId=172028160022170356254345311901ed
路由配置
代码语言：javascript复制{ path: 'repeateDetailPage', element: <RepeateDetailPage /> },
解析
代码语言：javascript复制 import { useSearchParams } from 'react-router-dom';
const [searchParams] = useSearchParams();
const queryString = Object.fromEntries(searchParams);
const { appName, traceId } = queryString;
地址解析2
地址:
/flow/module/designer-outer-circle/dev/time_designer-outer-circledev1703556582219
路由配置
代码语言：javascript复制{ path: 'module/:appName/:env/:recordid', element: <FlowModule /> },
解析
代码语言：javascript复制import { useParams } from 'react-router-dom';
const queryString = useParams();
const { appName, env, recordid } = queryString
react-redux
数据缓存
以config为例
代码语言：javascript复制import { createSlice } from '@reduxjs/toolkit';
const configSlice = createSlice({
name: 'config',
initialState: {
fullScreen: false,
},
reducers: {
changeFullScreen(state, { payload }) {
state.fullScreen = payload;
},
},
});
export const { changeFullScreen } = configSlice.actions;
export default configSlice.reducer;
使用
代码语言：javascript复制import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { changeFullScreen } from '@/store/modules/config';
const dispatch = useDispatch();
// 获取到state中的值
const { fullScreen } = useSelector((state) => ({ fullScreen: state.config.fullScreen }), shallowEqual);
// 修改state中的值
dispatch(changeFullScreen(false))
