A4纸打印
第1页
滕运锋的个人主页
手机:184-5801-9856
教育:全日制一本,药学@沈阳药科大学
其他:1991年出生,现居上海浦东
1团队管理经验,2年技术带队经验。 项目经验丰富。 责任心强,有工匠精神和轻度代码洁癖。 重视工程化,擅于编写高可维护性的代码。 学习能力强,有跳级、保送、自学转行的经历,无障碍阅读英文技术资料。 有一定的JS全栈开发能力和服务器运维能力。
工作经历
  • 前端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等药政机构的注册申报工作及国外客户邮件处理。
项目经历
  • 第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