1、框架:精通 React 及其生态系统(Hooks、Context、Redux 等),深入理解 Fiber 架构与渲染机制,能够针对复杂业务场景设计高性能组件与可复用组件库,主导过多次技术栈升级与状态管理方案重构;
2、工程化:熟练配置及优化 Webpack/Vite 等构建工具,通过代码分割、Tree Shaking、CDN 加速等手段显著提升构建速度与产物性能。主导 Monorepo 改造(pnpm + Turborepo),统一代码规范(ESLint / Prettier),并搭建 CI/CD 流程实现自动化部署;
3、性能优化:从网络层面(资源预加载)、渲染层面(减少重绘回流、虚拟列表)、缓存策略(HTTP 缓存)等多维度优化首屏加载与交互体验,结合 Lighthouse、Sentry 等工具建立性能监控体系,持续优化核心 Web 指标(FCP、LCP、CLS);
4、Next.js:熟练运用 Next.js 实现 SSR、SSG、ISR 渲染模式,优化 SEO 及首屏加载速度,处理复杂的数据预取、动态路由与边缘缓存策略,曾主导多个中大型项目的 SSR 改造;
5、微前端:基于 qiankun 或自研方案,设计并实施微前端架构,实现多团队独立开发与部署,解决应用间通信、样式隔离、公共依赖共享、沙箱隔离等核心问题,支撑大型业务系统的渐进式迁移与扩展;
6、TS:全流程使用 TypeScript 开发,擅长类型系统设计与复杂类型推导(泛型、工具类型),对旧有核心代码进行渐进式 TypeScript 迁移,显著提升代码健壮性与可维护性;
7、跨端:熟练运用 React Native 实现 iOS/Android 双端应用开发,从零搭建项目架构,集成TypeScript、 Redux Toolkit、React Navigation 等生态,并有移动端 H5 适配与性能优化经验;
8、AI:提升开发效率,研究+尝试新时代下使用 AI 快速进行代码开发的工作流程:使用 Gemini、Cursor 进行代码快速编写。
简介:面向齿科数字化诊疗的订单管理平台,支持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效率;
1.2、推动状态管理从Context向Redux Toolkit重构,创建标准化的Slice模块,统一store配置,移除冗余Context代码,使状态流可追溯,排查因状态变化引发的bug效率提升60%;
对核心业务模块进行渐进式TypeScript迁移,设计强类型接口与工具类型,确保关键数据流类型安全,将运行时错误降低30%;
1.3、引入Monorepo架构(pnpm workspaces + Turborepo):将公共业务组件、工具函数库、TypeScript基础配置、ESLint规则集等拆分为独立包,实现Web管理端与移动端H5的代码共享与统一依赖管理。通过Turborepo的任务编排与远程缓存,全量构建时间从8分钟压缩至3分钟,增量构建仅需30秒;统一版本控制后,跨项目组件复用率提升50%,新项目初始化成本降低60%,有效支撑了多端业务的快速迭代。
2、服务端渲染与SEO性能攻坚:
2.1、基于 Next.js 重构订单详情、商品列表等核心页面,实现 SSR 与 ISR 混合渲染模式,利用动态路由与 getServerSideProps 优化数据预取,首屏加载时间(FCP/LCP)分别提升 40% 和 35%;
2.2、针对行业特性优化SEO:重构页面标题、元标签及HTML层级结构,部署主题集群策略,结合 Next.js 的 next/head 动态注入结构化数据,使站点在谷歌搜索的牙模相关关键词排名进入前3页;
2.3、引入 React Query 管理服务端状态,设计统一缓存策略,避免重复请求,结合持久化缓存减少 80% 的无效 API 调用,并实现数据预加载提升页面切换流畅度。
3、微前端架构设计与落地:
3.1、参与基于 qiankun 框架搭建的主应用基座,完成订单管理、3D模型预览、报表分析等子应用的独立接入与部署,解决样式隔离、公共依赖共享、应用间通信等核心问题,支撑多团队并行开发,迭代效率提升50%;
3.2、基于 initGlobalState 实现主子应用状态同步,封装通信SDK,确保订单状态、用户权限等关键信息在微应用间实时一致。
4、高复用组件库与业务抽象:
4.1、基于Ant Design二次封装10+个业务通用组件,包括支持多维度筛选、条件组合、清空重置的复杂日期选择器,以及订单状态流转卡片、模型预览占位等,统一视觉规范与交互体验,使同类需求开发周期缩短40%;
4.2、建立组件文档与示例,推动团队复用已有组件,减少重复代码,提升代码库可维护性。
5、实时通信与多标签页协同
基于WebSocket实现订单状态实时推送与多标签页同步,设计客户端自动重连机制,结合心跳保活保障长连接稳定性;Node.js层使用ws库处理WebSocket服务,支撑日均百万级消息推送。
6、前沿技术探索与效率提升
研究并引入AI辅助开发工作流:利用Cursor、Gemini等工具将设计稿快速生成组件代码,辅助动画调试与响应式布局,使原型开发效率提升约30%;同时建立代码审查机制,确保AI生成内容的质量与可维护性,为团队积累了AI赋能前端开发的实践经验。
简介:面向齿科数字化诊疗的订单管理平台,支持3D牙模模型的订单创建、流转、发货及状态跟踪。系统采用微前端架构,集成多个子应用,通过服务端渲染优化SEO及首屏性能,为诊所、工厂等多角色用户提供高效协同的订单处理体验。 技术栈:React, Next.js, TypeScrip
简介:为齿科诊所医生与护士量身定制的移动端辅助应用,支持查看患者3D牙模、记录诊疗过程、管理预约与订单状态。基于React Native实现一套代码同时覆盖iOS与Android平台,满足移动办公场景下的高效协同需求。 技术栈:React Native, TypeScrip