峰间的云

第1页

项目经历：筑绘通（在线建筑模型编辑）

2021年12月~2024年1月

官网链接： https://www.pinlandata.com
这是一个集dwg建筑模型识别、编辑、出图功能为一体的在线工具。项目难点在于 数据模型种类繁多、异步事件处理频繁、充斥着三级以上的联动交互 ，很容易出bug，在组员的支持下，第一年我们就成功将前端团队的bug占比下调了20个百分点。
2年时间里，我们主要做了以下事情：
- * 将项目由Vue2 option API + js重构为Vue3 composition API + ts，数据类型更清晰。
- * 制定代码规范，坚持code review，增强团队成员对代码的敬畏之心。
- * 整理对外定制项目中的常见UI元素，带领组员开发了一套基础项目模板，方便开展新项目。
- * 工作台代码组织优化：①将画布相关API和对象模型单独封装成SDK，从业务代码中抽离。②按需绑定/移除/恢复事件监听。③对对象上不需要立即获取的数据进行lazy读取优化。

第2页

项目经历：叮咚买菜供应链后台系统

2021年7月~2021年12月

这是一个使用Vue2 + Element-UI + Webpack4的典型供应链后台管理系统。我主要负责调拨部分的业务迭代。彼时团队正用乾坤将老应用拆分微前端，但老项目短时间内仍将存在。老项目开发和编译用时长，严重影响了开发/部署效率。故对老项目进行了编译优化。
本次优化前后核心数据对比结果见上图，其中最有意义的数据是以下3个：
- * dev热更新时间：从16秒降至不到1秒，降幅超93%，显著提升了开发效率。
- * build时间：从近6分钟降至1分12秒，降幅超79%，提高了测试/产线环境的发布效率。
- * build产物大小：从90.2MB降至22.3MB，降幅超75%，提升了用户体验（开启gzip后仅4MB）。
主要的优化点有：
- * 减少无意义的资源引用（效果拔群⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐）
- * 合理设置webpackMode（效果拔群⭐⭐⭐⭐⭐⭐）
- * 升级部分插件（效果一般⭐⭐⭐）
- * 升级node（效果不定⭐⭐）
- * devtool的值注意一下（效果一般⭐⭐⭐）
- * 使用CDN、DLL（效果一般⭐）
- * 更换压缩插件（效果较好⭐⭐⭐⭐）
- * 干掉SourceMap（效果好⭐⭐⭐⭐⭐）
- * 提取公共代码（效果好⭐⭐⭐⭐⭐）
- * 使用缓存（效果一般⭐）

第3页

项目经历：好买基金+储蓄罐（2个APP）

2018年9月~2021年7月

这是hybrid APP，由原生和前端团队公共维护，前端团队负责其中的web部分，web部分按访问协议分为2类：
- * 远程通过https://协议访问的web页面：发布简单、访问慢
- * 打包到APP本地通过file://协议访问的web资源包：发布麻烦（涉及增量/全量包概念）、访问快
在职期间，对项目进行了一系列技术优化，比较突出的点有：
- * 减少APP内H5资源包的全量包和增量包大小，其中一个子项目优化后 编译产物大小缩减了78%（4.6M=>1M），编译时间缩减了87%（150秒=>20秒） 。
- * 对于1个项目里输出产物需要同时用于多处（掌机APP、储蓄罐APP、微信/wap端）但每处又不完全一致的情况，支持根据路由配置（示意图见下页附图2）实现 编译一次按模块/页面精度输出多份不同产物 ，避免需要编译多次的麻烦。
- * 通过条件编译的方式，将编译最慢的 一个大型webpack项目（400多页面） 的编译时间 由一个多小时缩短到一刻钟以内 。
此外，对项目架构也进行了一系列优化（优化前后H5资源架构对比图见下页附图1）：
- * 将仓库B代码合并至仓库A的cxg子项目中，去掉了对仓库B的代码维护工作。
- * 对仓库A中asset子项目和cxg子项目将中部分通过不使用webpack的上古项目代码进行迁移，统一使用webpack打包，开发体验趋于一致。
- * 在仓库A中新增vendor子项目，编译出的js供其他3个子项目复用，有效减少了冗余代码。
- * 将低频使用页面，从APP端本地web资源中挪到远程web资源中。

第4页

项目经历：好买基金+储蓄罐（2个APP）

2018年9月~2021年7月

附图1：项目架构优化前后H5资源架构对比图
附图2：前端项目独立模块打包示意图

第5页

个人作品：在线bug监控系统

www.verybugs.com

实用的bug监控平台，平时公司项目里就可以用（尚未做读写分离，不适用于用户量大的场景）。包含以下子项目：
- * PC端管理系统。
- * 日志上报JS SDK（供外部项目集成上报功能）。
- * SSR预渲染的首页/着陆页（方便SEO）。
- * 登录模块。
- * node接口服务（koa + mysql）。
系统简介：
- * 支持上报JS运行时错误日志、接口日志、行为日志等。
- * 支持统计PV、UV、浏览器信息等。
- * 支持按用户、项目维度来隔离日志，方便阅读日志。
- * 该系统自带角色区分、会员有效期管理、在线支付、订单管理、邮箱验证、定时任务等功能。可作为开发常规网站的模板。

第6页

个人作品：在线bug监控系统

www.verybugs.com

附图1：Bug管理
附图2：行为日志在线查看

第7页

个人作品：二维/三维在线编辑器

www.veryhouses.com

二维部分基于fabric.js实现。三维部分基于three.js实现。
- * 二维工作台中，在简单平面图形的基础上,赋予其三维属性。
- * 二维工作台支持展示和编辑操作。
- * 三维工作台是对二维工作台中对象根据其属性进行的立体化展示。
- * 三维工作台目前仅支持展示，不支持编辑。

第8页

个人作品：博客

www.orzzone.com

这是我的个人博客。博客写了 15年 ，它不是技术博客，偶尔会有一些技术博文：
- * 如何在老项目里推行ESLint代码风格检测： https://www.orzzone.com/eslint-check.html 。
- * webpack4项目优化实战： https://www.orzzone.com/webpack4-project-optimize-in-action.html 。
- * 从零搭建一个前端项目： https://www.orzzone.com/start-frontend-project-from-scratch.html 。
- * Element-UI中Select下拉框组件添加虚拟列表： https://www.orzzone.com/element-ui-select-virtual-list.html 。
- * 编译要1小时的Webpack项目优化思路和条件编译方案： https://www.orzzone.com/webpack-conditional-compile.html 。
- * 浅谈混合APP中H5页面的缓存处理： https://www.orzzone.com/cache-control-in-hybrid-app.html 。
- * 编写vite插件实现项目内置组件库中组件名的自动生成。
- * 编写vite插件实现在编译产物中集成编译时间和tag/分支信息，便于确认各环境的代码版本。
- * 按钮点击回调的节流处理： https://www.orzzone.com/button-throttle-in-action.html 。
- * Vue防快速连击指令&权限指令的坑： https://www.orzzone.com/vue-directive.html 。
- * 公共请求的封装： https://www.orzzone.com/ajax-utilities.html 。