苑飞

小米社区 & 汽车社区

React Taro

项目职责:

1. 小米社区App端:

主要负责社区活动、视频及内测相关业务的功能开发，主导实现了接近原生体验的短视频功能，在滑动流畅性、渲染速度与视 频可播放性能等方面表现优异, 同时参与并承担了个人主页与详情页等模块的部分研发与维护工作, 开发之余做优化专项从页面首 帧渲染速度以及webpack打包等多维度进行优化, 效果显著.

2. 微信小程序:

主要负责基础组件、发布会以及园区等活动相关业务的研发与维护.

3. 反馈飞书小程序:

主导飞书小程序从0到1的搭建，基于Taro成功完成从技术选型、开发、集成到上线的全流程，并成功交付.

4. 汽车社区:

主要负责汽车社区视频功能开发, 功能类似于小米社区的短视频功能, 在Flutter项目中内嵌的h5页面, 技术栈React.

5. 运营后台:

主要负责对应H5业务方向的后台功能开发与维护, 核心技术栈以React + Antd为主.

项目成果:

1. 小米社区App日访问量170万, 微信小程序日访问量14万, 短视频内容显著提升内容消费时长从最初20s => 140s.

2. 短视频页首帧渲染速度优化

利用video和store的按需引入, 拆分ts切片, 组件的异步加载, 渐进式加载视频等方式优化:

中高端机型 FCP: 712 => 346ms, LCP: 976 => 459ms

中低端机型 FCP: 952 => 488ms, LCP: 1590 => 728ms

3. 短视频滑动可播放速度优化, 从616 => 188ms, 达到几乎滑动即可播的效果

4. 解决视频报错问题, 将日均错误数从2400 => 6, 遇错误用户数从800 => 2

针对社区视频因来源多样导致的编码格式、像素采样与码率不统一问题，通过优化编码Profile、Constraint及码率兼容性等参 数，攻克了H5端的播放兼容性技术难点, 显著提升了H5端的播放成功率和用户体验。

5. 开发了社区直播和视频自适应流功能, 根据带宽码率以及设备分辨率播放对应视频流.

6. 优化小米社区H5项目编译时间:

开发环境编译从60s => 10s, 生产环境打包从87s => 32s

柠檬爱美

React Taro Vue

该平台是一个医美分享社区和机构服务信息结合一体的网络服务平台, 竞品对标新氧. 大体分为B端和C端两部分

项目职责:

1. B端医院端:

对基于React的遗留项目进行了技术栈升级，将Webpack 3、React 14等迁移至最新版，以支持Hooks与TypeScript来提升 可维护性，并负责数据报表和优选商品模块的开发。

2. C端H5 & 手百小程序

基于Taro构建H5和手百小程序, 结合React hooks + Typescript在百度eslint规则下规范开发, 主要负责首页sug 搜索、四位 广告落地页,、商品评价模块的研发, 并参与问医生、小流量落地页等业务的研发.

3. 阿拉丁

基于 Vue 框架构建的机构主页和流量商业化包括广告落地页.

项目成果:

1. h5页面的日均访问量300万pv

2. 通过webpack4对项目多页面的构建和打包进行了精细优化, 使得包体积缩小了43%