- 前端Team Leader@上海XX科技有限公司（高新企业）1年（在职中）
- * 将研发bug中前端bug占比从30%优化至10%。
- * 将项目由Vue2 option API + js重构为Vue3 composition API + ts，数据类型更清晰。
- 资深前端@叮咚买菜（高新企业）0.5年
- * 推进代码风格检测，优化Webpack 4项目编译时间和产物大小。
- 高级前端[技术带队]@好买财富（高新企业）3年
- * 主要负责公司核心产品"好买基金"APP内交易类H5页面的业务迭代，处理大部分前端产线问题。
- * 在团队内起到技术带队的作用，制定团队代码规范，普及一些代码最佳实践，提高团队编码能力。
- * 优化webpack3项目编译时间，封装方法库，减少APP中全量/增量H5资源包的大小。
- 前端主程@北京无线天利有限公司上海分公司（上市公司）3年
- * 独立负责公司"车保赢"（车险比价）微信公众号的前端开发，将项目由Angular1重构为Vue2。
- * 期间开始用node写一些脚本，比如用PhantomJS无头浏览器批量截屏含数学公式的网页。
- * 参与过公司一个寿险APP外包项目的研发（使用react native）。
- 国际药品注册@浙江普洛康裕制药有限公司（top50药企）2年
- * 负责化药原料药、发酵品、制剂向FDA、WHO等药政机构的注册申报工作及国外客户邮件处理。
第1页
滕运锋的个人主页
1年团队管理经验，2年技术带队经验。 项目经验丰富。 责任心强，有工匠精神和轻度代码洁癖。 重视工程化，擅于编写高可维护性的代码。 学习能力强，有跳级、保送、自学转行的经历，无障碍阅读英文技术资料。 有一定的JS全栈开发能力和服务器运维能力。
- 第2~4页
- 第5~6页
第2页
项目经历：筑绘通（在线建筑模型编辑）
2021年12月~至今
这是一个集dwg建筑模型识别、编辑、出图功能为一体的在线工具。项目难点在于数据模型种类繁多、异步事件处理频繁、充斥着三级以上的联动交互，很容易出bug，不过经过1年时间，在组员的支持下，我们成功将前端团队的bug占比下调了20个百分点。
这一年时间里，我们主要做了以下事情：- * 将项目由Vue2 option API + js重构为Vue3 composition API + ts，数据类型更清晰。
- * 制定代码规范，渐进式引入Prettier + ESLint强制检测代码风格，减少一些低级错误的发生。
- * 坚持code review，增强团队成员对代码的敬畏之心。
第3页
项目经历：叮咚买菜供应链后台系统
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（效果好⭐⭐⭐⭐⭐）
- * 提取公共代码（效果好⭐⭐⭐⭐⭐）
- * 使用缓存（效果一般⭐）
第4页
项目经历：好买基金+储蓄罐（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资源中。
第5页
项目经历：好买基金+储蓄罐（2个APP）
2018年9月~2021年7月
附图1：项目架构优化前后H5资源架构对比图
附图2：前端项目独立模块打包示意图
第6页
个人作品：在线bug监控系统（重构中）
www.verybugs.com
这是实用的bug监控平台，平时公司项目里就可以用。包含3个子项目：- * PC管理系统前端，使用vue3 + vite + typescript + element-plus。
- * 日志上报JS SDK：使用rollup打包。
- * node服务：nestjs + mysql。
该系统支持以下一些实用的功能特性：- * JS运行时错误上报。
- * 接口日志上报。
- * 性能日志上报。
- * 邮件告警通知。
- * 按公司、项目来进行日志隔离，方便阅读日志。
第7页
个人作品：博客
www.orzzone.com
这是我的个人博客，访问链接：https://www.orzzone.com。博客写了10年左右，里面有平时写的一些技术博文：- * 如何在老项目里推行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。