项目
# 项目选择
# 易牛托管CMS
项目描述
易牛CMS建站平台是一个帮助客户快速搭建和运营网站的系统，通过该系统可以为用户提供高效、灵活且易用的一站式建站解决方案。平台内支持用户通过拖拽组件、动态表单配置等方式快速构建页面，另外还提供了丰富的自定义组件库，以满足不同客户的个性化需求。通过此平台，可以大大提升客户建站效率，从设计到站点落地均可借助该平台完成。
CMS： Content Management System，内容管理系统
技术栈
vite, vue3, vue-router, pinia, element-plus, vuedraggable, form-create, vuex-orm, node, koa, parse5, uni-app, webpack, strapi
vuedraggable (opens new window)： vue的拖拽库
form-create (opens new window)： 基于Vue的低代码可视化表单设计器工具
vuex-orm (opens new window)： 基于vuex的对象关系管理库
parse5 (opens new window)： 解析HTML的工具，用于对用户编辑的HTML文档做实时预览
strapi (opens new window)： 无头开源CMS，支持私有部署
node: 用于BFF，后端使用的是微服务架构，BFF用于聚合接口
项目职责
优化和提升编辑器性能
利用性能分析工具定位问题然后针对性的优化
举一个印象深刻的例子：
当编辑器内容很多时，再拖拽容易出现卡顿，当时分析下来是因为拖拽时在不断计算编辑窗口中各种元素的尺寸和位置，导致了大量出现回流。所以我后来的解决办法时，将元素的尺寸和位置保存到一个缓存区，同时利用一些观察器监控元素的变化来更新缓存，这样在拖拽时只需要读取缓存区的信息就可以了，就无须重复计算元素的几何信息。
参与制定组件库中的组件开发规范
- 明确组件功能边界
- 设计组件颗粒度
- 描述组件的外观
- 开发、测试、提交
增强现有组件库，封装部分新增组件
- 文件上传组件
- 文件预览组件
- 表单组件
- ...
对现有前端构建工具进行升级
从webpack4升级到webpack5 公司后台系统用的是自行搭建的工程，升级是为了解决构建性能的问题手段之一，构建性能还有很多其他问题
引出【难点攻关2】
其他开发： 公司后台系统、销售工具、代码重构
销售工具： 对应项目业绩第一条
项目业绩
开发并发布索管家小程序版，提升客户销售工作效率。
简易的CRM工具
持续代码重构，优化执行效率，提升代码可维护性，精简代码体积，重构覆盖率50%。
精简分支
优化时间复杂度
替换魔法数字
明确组件边界
解决硬编码
...
深度优化webpack构建流程，借鉴业界领先的技术方案，集成swc、thread-loader、持久化缓存等技术，从多维度提升构建效率，成功将构建时间从最初的8分钟缩减至10秒内，极大地提高了开发和部署效率。
【难点攻关2】 公司后台系统用的是自行搭建的工程
使用计时器劫持模拟，并通过线程通信，封装通用的解决浏览器页签计时器节流问题。减少开发期间心智分担，并收录到企业通用库，服务于公司相关业务产品。
【难点攻关14】
公司内部有文档实时协作的需求
实现虚拟列表，通过缓冲区技术显著提升长列表的滚动流畅度和渲染性能。经过优化，渲染时间减少了90%，实现了滚动无卡顿。该优化方案已成功应用于多个项目，解决了大规模数据展示的性能瓶颈问题。
【难点攻关8】
客户官网出现长列表时可用
# DCIM数智化管控
项目描述
DCIM数智化管控系统从技术、流程、运维、销售、管理等方面为企业提供一站式数智化管理的解决方案，从机房、机柜、电源、交换路由、服务器集群，到每一台服务器的位置、配置与操作功能均纳入管理，完整呈现基础设施全貌，提供全方位的机房资源管理。系统集成先进的自动化功能集，例如IPMI远程开/关机、自动批量重装系统、交换机流量监控、IP-MAC自动绑定等。通过便捷的管理功能，大幅提升自动化运维管理水平。
DCIM：Data Center Infrastructure management，数字中心基础设施管理
技术栈
react, react-router, recoil, ant-design, less, webpack4, Jest, echarts, node, MockJS, mongodb
Jest (opens new window)： 前端单元测试框架
项目职责
参与项目主业务功能开发
搭建Mock数据平台
第一次用mock生成数据，存储到mongodb里面，之后从mongodb取数据
参与公共组件的提取和沉淀
- 封装表格组件
- 按钮组组件
- 消息和反馈组件
与后端开发团队进行项目联调
开发并维护项目文档，提升项目可维护性
- 组件文档
- 接口文档
- 代码规范文档
项目业绩
利用拦截器封装双Token自动刷新模块，收录到企业组件库
根据需求新增部分组件，并对新增组件做单元测试，保证测试通过率在80%以上
测试框架使用Jest
攻克技术难点，参考飞书的技术方案，实现DOM到Clipboard的数据链路转换，并收录到企业通用库，服务于4+项目。
【难点攻关5】
很多图、文、表的报告信息需要支持以图片的形式复制到剪贴板里面
基于监控平台的数据反馈，优化用户首次访问的网络问题，通过优化DNS解析的方案，DNS解析提升99%，并且首次访问相关FCP，LCP提升 25% - 30%，该功能已被收录到公司通用库，服务于公司10+项目。
【难点攻关10】 首次进入系统会有卡顿现象，对此进行优化
根据公司实际需求定制前端监控SDK，实现了对性能指标、异常、用户行为等信息的收集，同时最大限度的降低了对业务代码的侵入性。服务于公司5+线上产品。
【难点攻关11】
# 同策好房ERP
项目描述
同策好房是上海头部房地产咨询公司。该系统服务于同邻互联网公司内部，用于整合和管理企业内部的所有资源，包括财务、运营、销售、人力资源等，是一个全面的企业管理平台。系统的重心在CRM，从销售线索到售后维护，包含了对客户生命期的全链路跟踪。
技术栈
vite, vue3, vue-router, vuedraggable, pinia, element-plus, vue-use, echarts, vue-quill-editor, html2canvas, driver.js
vue-use (opens new window)： 一个封装了各种hooks的工具库
vuedraggable (opens new window)： vue的拖拽库，用于排序，自定义海报图等
Vue-Quill-Editor (opens new window)： vue的富文本编辑器组件
html2canvas (opens new window)：用于将页面元素转换为图像的库
DriverJS (opens new window)： 新手引导库
项目职责
销售系统的业务实现
销售数据与OA系统的对接
SMS系统的接入
SMS： Short Message Service，短消息服务，通常指短信
参与技术选型和方案落地
实现推广模块，并与百度推广平台数据同步
客户要求移植百度推广平台的后台到自建系统。
基本1:1还原了百度推广后台。
项目业绩
实现楼盘海报自生成工具，大幅度提升运营人员广告图的生产效率。
UI出底图，系统根据底图生成多个模板，运营人员可以根据模板自行修改生成广告图。 可对接到【难点攻关1】
推动微前端落地，解决巨石应用难以维护的问题，极大的提升了构建性能，并大幅度缩减了开发成本。在生产环境运行半年多，不但接入了老旧项目分拆出来的5+应用，还接入了新产品线的2+应用，以及 4+ 不同类型的技术栈。
【难点攻关9】
原项目通过qiankun架构分成了三大模块进行重构，分别是楼盘模块、推广模块和权限模块。
设计适用于长表单应用的高性能数据存储与同步模块，并主导该模块的实现与落地。通过深度优化本地存储和采用浏览器跨标签页通信方案，将表单数据存储和同步效率提升了90%，从根源上规避了数据遗失风险。该模块已成功发布到npm，广泛应用于公司内部和外部项目。
【难点攻关7】
楼盘模块涉及到了长表单，用户在编辑的途中涉及到自动保存，以及重开标签页后，恢复之前填写的数据。
使用WebAssembly技术实现前端图像处理，结合Web Worker优化图像效率，实现图像处理速度提升2倍，并降低50%的处理延迟，显著提高用户体验。
【难点攻关1】
最终要生成海报，这里添加了一个需求，能够对海报进行简单编辑
# 上汽DFMEA定制
项目描述
该系统可以帮助汽车工程师发现与车辆设计相关的潜在风险。DFMEA系统可以标准化车辆设计过程中产生的海量信息，通过建立标准流程、描述信息的依赖关系、为信息划分层次结构等等，可以大幅度优化设计与审核效率，便于主审及时发现车辆设计中的风险点从而减少生产事故和交付风险。
DFMEA： Design failure mode and effect analysis, 设计失效模式和影响分析
注意： 这个项目一定得是中途参与
技术栈
vue2/vue3, vue-router, vuex, pinia, TypeScript, vite, webpack, dfmea-comp, dfmea-cli
dfmea-comp： 公司自研组件库，你没参与研发
dfmea-cli： 公司自研脚手架
项目职责
系统技术版本升级，涉及到业务代码、组件库、脚手架
参与公共功能的提取和沉淀
关联到【难点攻关12】
基于监控平台的数据反馈进行性能调优和bug修复
关联到【难点攻关16】
各种新增业务功能的实现
关联到【难点攻关15】
提供系统技术支持
项目业绩
对系统技术版本升级，包括vue2升级到vue3，vuex升级到pinia，webpack4升级到webpack5，babel升级到swc等等，大幅度提升系统效率和可维护性。
实现跨标签页通信常用技术手段的封装，主要通过BroadCastChannel API，并处理了相关兼容性降级预案。收录到企业通用库，服务于2+项目
【难点攻关12】
工程师可能会开启多个标签页进行流程编辑，需要将信息同步。
基于监控平台的数据反馈优化首页白屏问题，通过defer方案，配合自行研发的元素嗅探工具，完成首屏的切片化渲染。FCP提升99%，LCP提升95%，RR提升12%。
【难点攻关16】
封装可扩展的文件运行时，实现对多文件的预览支持，目前已支持img、docx、xlsx、ppt、pdf、md、txt、audio、video、html等。该功能已被收录到公司通用库，服务于4+项目。
【难点攻关15】
系统中会留存企业操作规范手册等文件
# 九悦云影像
项目描述
远程医疗系统，主要服务于三四线城市的医院和患者。项目分为B端和C端，B端为PC端，C端为移动端，B端用于医院，C端用于患者。患者可以使用该系统完成在线就诊，医生可以根据患者的情况制定治疗方案。系统同时连接到医院内部的影像数据，可以供医生快速浏览患者病历。
技术栈
vite、vue3、vue-router、pinia、element-plus、ws、uniapp、oauth2、TypeScript、vant、sentry
ws： 一个websocket通信库
sentry： 开源服务监控平台
项目职责
- 实现整个系统从0到1的开发
- 完成本系统到医院已有系统的接入
- 处理第三方登录
- 处理系统中的BUG和性能问题
- 持续重构并沉淀公共库
项目业绩
基于WS对WebSocket进行二次封装并沉淀为公共库，支持心跳保活、重试、频道等功能。
为什么不用socket.io？
因为socket.io会改动消息格式，服务器只支持纯文本格式。
参考Google Docs以及语雀的项目架构，实现实时协作功能，采用WebSockets和差量同步技术，确保多用户数据一致性和实时更新。支持离线编辑的功能，集成冲突解决机制和用户操作记录，大幅提升协作体验和系统稳定性。系统优化后，实时协作延迟减少了40%，用户满意度提升了25%。该功能已成功应用于多个项目，显著提高了团队协作效率和产品竞争力。
【难点攻关4】
自定义Vite插件实现类umi的约定式路由，减少80%路由样板代码，降低90%的路由BUG
【难点攻关6】
根据前端监控平台的量化指标数据，制定对应优化策略方案，实现既定优化目标。并自定义Vite插件处理Prefetch预加载问题，降低30%-50%的打包体积，打包时间减少到20s内。FCP，LCP提升80%以上，RR用户留存率提升12%。
【难点攻关13】
# 示例
九悦云影像 2024-01 ~ 2024~06 前端工程师
项目描述
远程医疗系统，主要服务于三四线城市的医院和患者。项目分为B端和C端，B端为PC端，C端为移动端，B端用于医院，C端用于患者。患者可以使用该系统完成在线就诊，医生可以根据患者的情况制定治疗方案。系统同时连接到医院内部的影响数据，可以供医生快速浏览患者病历。
技术栈
vite、vue3、vue-router、pinia、element-plus、ws、uniapp、oauth2、TypeScript、vant、sentry
项目职责
- 实现整个系统从0到1的开发
- 完成本系统到医院已有系统的接入
- 处理第三方登录
- 处理系统中的BUG和性能问题
- 持续重构并沉淀公共库
项目业绩
基于WS对WebSocket进行二次封装并沉淀为公共库，支持心跳保活、重试、频道等功能。
参考Google Docs以及语雀的项目架构，实现实时协作功能，采用WebSockets和差量同步技术，确保多用户数据一致性和实时更新。支持离线编辑的功能，集成冲突解决机制和用户操作记录，大幅提升协作体验和系统稳定性。系统优化后，实时协作延迟减少了40%，用户满意度提升了25%。该功能已成功应用于多个项目，显著提高了团队协作效率和产品竞争力。
自定义Vite插件实现类umi的约定式路由，减少80%路由样板代码，降低90%的路由BUG
根据前端监控平台的量化指标数据，制定对应优化策略方案，实现既定优化目标。并自定义Vite插件处理Prefetch预加载问题，降低30%-50%的打包体积，打包时间减少到20s内。FCP，LCP提升80%以上，RR用户留存率提升12%。