【核心技术栈】 熟练使用 React / Vue3 进行中后台与复杂工业系统前端开发;深入理解 React Fiber 架构、虚拟 DOM 原理及组件生命周期。
【TypeScript】 深入掌握 TS 类型系统,具备复杂业务链条的高防御性类型抽离能力。熟练运用条件类型、条件映射编写高复用工具类型;深刻理解函数参数的逆变与协变安全机制,并成功将其应用于团队全局数据流的编译期底层逻辑熔断,将类型安全防线前置,规避运行时崩溃
【状态与请求管理】 熟练运用 Redux Toolkit、React Router 等核心生态进行全局状态管理优化与复杂数据流转,掌握 React
Hooks 链表状态流与闭包陷阱的底层规避方案;熟悉 Axios 请求层统一封装及全局异常处理。
【工程化与构建工具】 深入掌握 Webpack/Vite 的编译转译机制与构建全生命周期流程。具备中大型企业老旧遗留项目的构建重构
经验;能够从构建性能、传输性能及运行性能三个方面进行工程调优。
【数据可视化】 熟练运用 ECharts 实现高频刷新、大数据量等工业场景下的生产监控、设备状态及异常告警等看板开发。
MES生产管理系统
运用技术:React + TypeScript + Vite + Ant Design + Redux Toolkit + Axios
项目描述:面向工厂生产流程的 MES 后台管理平台,包含工单管理、生产任务、设备状态、人员权限等核心模块 。
项目职责:
【架构升级 / 多环境防错】针对工厂复杂的多套业务网络环境,主导了项目多环境构建流的规范重构。通过打通编译期与运行时的变量壁垒,实现了开发、测试、生产三套环境 API 地址的自动无感切换,彻底规避了历史重构中因手动修改配置引发的线上环境连错问题。
【构建调优 / 突破瓶颈】负责优化中大型历史遗留项目的构建速度。引入多进程并行类型检查与代码转译流,并针对无外部依赖的大型单文件库实施免解析放行策略,使全组日常开发的冷启动与热更新缩减至秒级响应,显著提升团队研发效率。
【传输优化 / 极限瘦身】主导了公共工具库的性能攻坚,深度排查并修复了由于历史转译原因导致的 Tree Shaking 全面失效问题;配合多维度代码分割策略,成功使最终生产包体积缩减约 30%,极大提升了弱网车间环境下的首屏加载与传输性能。
工厂设备巡检 H5 系统
运用技术:React + ECharts + TypeScript
项目描述:用于工厂一线工人进行设备点检、日常巡检记录填写与异常一键上报的移动端 H5 系统
项目职责:
【类型安全设计】负责一线移动端巡检动态大表单功能开发。杜绝使用模糊类型,利用 TS 映射类型与条件约束对多级嵌套的巡检表单数据进行强类型抽象,设计精密的联合类型与可辨识联合进行多分支状态守卫,在编译阶段提前拦截 95% 以上因字段缺漏、非空断言失败导致的运行时白屏异常
【性能与适配】 运用 Tailwind CSS 与媒体查询实现深度适配方案,确保在不同尺寸的 Android/iOS 手机及微信内置浏览器环境下的版面无缝兼容;基于 React Fiber 双缓存机制原理 优化表单动态联动组件的更新性能,杜绝大表单输入时的严重卡顿感。
【极端环境优化】 针对一线车间偶发性弱网/离线环境,前端实现图片上传压缩预处理、大表单数据本地队列自动暂存防丢失机制,在网络恢复后自动触发数据同步,显著降低用户重复填写的焦虑感
生产数据可视化看板系统
运用技术:Vue3 + Vite + Tailwind CSS + ECharts
项目描述:用于实时展示生产线运行状态与关键产量指标的大屏可视化监控系统,支持设备实时监控与异常告警 。
项目职责:
【图形渲染落地】 基于 ECharts 独立实现多维折线图、产量统计柱状图、设备状态饼图等复杂数据联动展示。采用 Flex / Grid 弹性布局配合百分比方案,完美适配不同车间、不同尺寸的工业大屏显示设备,保证图表自适应无损缩放。
【高频性能调优】 针对车间流水线高频刷新、大数据量渲染导致页面偶发卡顿的痛点,通过图表组件按需懒加载、配合防抖/节流策略降低重绘频次,大幅提升大屏滚动的流畅度;并在组件卸载时严格执行实例销毁与事件解绑,防止因频繁切页导致浏览器内存泄漏。
【数据层联调】 与后端紧密配合,处理高频实时数据接口的联调测试,规范极端弱网环境下的异常数据处理逻辑