简介:面向齿科数字化诊疗的订单管理平台,支持3D牙模模型的订单创建、流转、发货及状态跟踪。系统采用微前端架构,集成多个子应用,通过服务端渲染优化SEO及首屏性能,为诊所、工厂等多角色用户提供高效协同的订单处理体验。
技术栈:React, Next.js, TypeScript, Redux Toolkit, React Query, WebSocket, Vite, qiankun, Ant Design, Tailwind Css。
工作内容:
1、全栈技术架构升级与工程化重构:
1.1、主导项目从Webpack到Vite的构建工具迁移,重新设计入口与插件体系,将开发服务器启动时间从30秒以上压缩至3秒,生产构建耗时由75秒降至15秒,热更新响应速度提升90%以上,显著改善开发体验与CI/CD效率
2、服务端渲染与SEO性能攻坚:
2.1、基于 Next.js 重构订单详情、商品列表等核心页面,实现 SSR 与 ISR 混合渲染模式,利用动态路由与 getServerSideProps 优化数据预取,首屏加载时间(FCP/LCP)分别提升 40% 和 35%
3、微前端架构设计与落地:
3.1、参与基于 qiankun 框架搭建的主应用基座,完成订单管理、3D模型预览、报表分析等子应用的独立接入与部署,解决样式隔离、公共依赖共享、应用间通信等核心问题,支撑多团队并行开发,迭代效率提升50%;
4、高复用组件库与业务抽象:
4.1、基于Ant Design二次封装10+个业务通用组件,包括支持多维度筛选、条件组合、清空重置的复杂日期选择器,以及订单状态流转卡片、模型预览占位等,统一视觉规范与交互体验,使同类需求开发周期缩短40%;
5、实时通信与多标签页协同
基于WebSocket实现订单状态实时推送与多标签页同步,设计客户端自动重连机制,结合心跳保活保障长连接稳定性;Node.js层使用ws库处理WebSocket服务,支撑日均百万级消息推送。
6、前沿技术探索与效率提升
研究并引入AI辅助开发工作流:利用Cursor、Gemini等工具将设计稿快速生成组件代码,辅助动画调试与响应式布局,使原型开发效率提升约30%;同时建立代码审查机制,确保AI生成内容的质量与可维护性,为团队积累了AI赋能前端开发的实践经验。