Ashang 头像Ashang / RESUME
Ashang的博客
Ashang's resume
导航
FRONTEND DEVELOPER / PORTFOLIO

Hello, I'm Ashang

Life is sad at times, but it is up to you to make your own life happy

我叫Ashang

6年经验 · 前端开发工程师

浏览我的项目 联系我
DESIGN · DEVELOP · REFINE向下探索 ↓
01 / ABOUT ME

关于我

头像

- 幸会，我是Ashang！
一名前端开发工程师。我相信打造一款成功的产品离不开持之以恒的匠心与优化，能成为您的搭档共同创造出优秀且别具一格的作品，我倍感荣幸。
- 我能效劳
主导中大型复杂系统（SaaS 中台、可视化大屏、CMS 等）的前端架构搭建，掌握微前端（Module Federation）开发模式；精通混合式移动端应用及微信跨端多平台小程序（Taro/uniapp）的敏捷研发、全流程打包与部署上线。
- 关于我
目前坐标武汉。拥有 6 年 Web 前端开发经验（2019 - 至今），历任前端开发组长，具备优秀的团队协作与工程化实践经验。深入理解 Vue2/3 全家桶、React、TypeScript 及其底层原理，编码规范严谨，拥有成熟的性能优化与用户体验调优经验。
自驱力强，对新技术保持浓厚兴趣，执行力高效，期待与您开启合作！

02 / EXPERTISE

技能掌握

Skills:

  • 工程化
  • TS / JS
  • Vue 全家桶
  • Taro/小程序
  • HTML / CSS
  • AI Agent
工程化
TS / JS
Vue 全家桶
Taro/小程序
HTML / CSS
AI Agent

1. 热爱前端，写出高性能页面，能够兼容主流各种浏览器，如 IE8+、Chrome、Firefox等。

2. 熟练掌握各种 Web 前端技术，包括 HTML5、CSS3、JS/ES6+、TypeScript、WebSocket 等。

3. 熟练使用各种 CSS 布局及 Tailwind CSS 等 CSS 工具类，掌握 rem 响应式布局适配。

4. 熟悉 Vue 框架及微前端架构，对模块化开发、公用组件封装有着深入和独到的理解。

5. 精通 Vue2、Vue3 全家桶（Pinia、Vuex、Router、Axios），精通 Nuxt 服务端渲染与 SEO 优化。

6. 熟练使用 React 框架、Taro 及 uniapp 进行跨端跨平台项目（小程序、H5、Web）开发。

7. 熟练使用 Webpack/Vite 等构建工具，具备优秀的前端工程化开发与优化实践经验。

8. 熟悉版本管理工具（Git、Svn），掌握项目在 Linux 环境下的 Nginx 部署和静态资源配置。

9. 了解 Docker 容器化技术及 Jenkins CI/CD 自动化构建，能保障交付流程的高效顺畅。

10. 熟练将 AI Agent（如 Gemini、Claude、GPT 等大模型）深度融入日常开发与架构设计，擅长提示词工程与智能工作流构建，极大提升项目研发效率与交付质量。

03 / EXPERIENCE

我的经历

2021.07 - 2024.04 上海杨邑咨询
2020.04 - 2021.07 慕渊智能科技
2019.04 - 2020.04 北京云视科技

上海杨邑咨询

前端开发组长 / 资深工程师 2021.07 - 2024.04

负责公司核心 SaaS 产品、中后台及跨端移动应用的研发，指导初中级工程师并进行前端工程化落地。

  • 某电动车集团用户运营中台 (微前端)

    主导该系统（Vue3 + TS + Element-Plus）从 0 到 1 的前端架构搭建。通过微前端（Module Federation）将活动、用户、积分等大子系统拆分为远程组件，实现了多团队并行开发与热部署，项目首屏渲染时间减少 45%，打包体积压缩 60%。

    Vue 3TypeScriptWebpack 5Module FederationPinia
  • 飞利浦健康生活Lab系统 & 微信小程序

    独立研发可视化活动装修系统（Vue2/uniapp），支持运营人员拖拽配置生成营销页面。重构智能健康问卷系统，利用策略模式实现动态题目渲染，大幅减少代码冗余。微信小程序上线后，DAU 突破 10W+，页面交互卡顿率降低 75%。

    uniappVue 2Canvas策略模式
  • 梦幻家 AI 绘图小程序 (AI 创作生态)

    采用 Taro + TS 架构进行微信生态 ToC 混合开发，配合 Tailwind CSS 进行极致还原。通过 Canvas/WebGL 实现精美流光背景与生成特效，利用 SSE / 长轮询实现绘图进度百分比实时反馈，大幅提升了用户的转化率与付费意愿。

    TaroTailwind CSSCanvasSSE
  • 擎朗智能官网 CMS 管理后台

    使用 Vue 3 搭建多语言内容发布系统，支持可视化静态页面预览、多语种翻译及国际化多级资源分流，完美保障了企业出海品牌营销的定制化扩展需求。

    Vue 3ViteI18n

慕渊（上海）智能科技有限公司

技术部 / 前端开发工程师 2020.04 - 2021.07

负责智慧会展、线上虚拟展会等核心 H5、小程序与后台系统的研发。

  • 展商秀-web & 展商秀-管理后台 (音视频会展)

    负责 PC 端与移动端 H5 核心开发。使用 WebSocket 编写音视频展台与在线直播互动。在展商秀-管理后台（Vue + iView）中，通过深度防抖/节流及虚拟列表优化大容量数据报表渲染，极大提升了展会现场数据流统计效率。

    Vue 2Vant UIWebSocketiView虚拟滚动
  • 展商秀 Web 官网 SEO 优化项目 (Nuxt)

    针对原有 SPA 官网 SEO 收录较差的问题，采用 Nuxt2.js 服务端渲染框架进行重构，并配合 Nginx 进行页面级 Redis 缓存分发。重构后百度/谷歌蜘蛛收录量激增 300%，页面首屏 TTI 优化至 1.2s 内。

    Nuxt.jsSSRSEONginx
  • Corrface 全瓦通 & 微信小程序

    使用 mpvue 重构了会展助理小程序，利用自定义分包及资源惰性加载解决了微信小程序 2MB 文件体积上限问题，支持了会展的多角色（展商、买家、观众）多视图切换。

    mpvue微信分包微信 API 适配

北京云视科技有限公司

技术部 / 前端工程师 2019.04 - 2020.04

负责智慧城市、大数据大屏及客流监控系统的前端应用开发。

  • 客流监控多维度数据大屏 (驾驶舱)

    利用 Vue + Echarts 独立开发大屏端，实现多路客流指标数据的高精度实时渲染与多级联动图表。针对多图表重绘导致的 CPU 过载问题，通过 `requestAnimationFrame` 和图表池复用机制，将大屏运行时占用帧率稳定在 55-60 FPS。

    VueEchartsCanvas性能优化
  • 客流轨迹热力图分析系统 (H5/Web)

    在移动端和后台系统集成 heatmap.js，根据室内蓝牙定位信标数据动态绘制客流量空间轨迹热力图。结合离屏渲染，解决了数万个客流轨迹坐标在低配置设备上绘制时卡死的问题。

    heatmap.js离屏渲染H5 地图
04 / SELECTED WORK

我的项目

我的项目

用户运营中台

2022.04-2023.11
Vue3全家桶TypeScriptVite FederationOAuth2 SSOJenkins
项目概述：为某大型电动车集团定制开发用户运营中台，该系统旨在实现全流程的用户生命周期管理，包括线索收集、会员转换、数据监控、品牌商城、营销活动以及售后服务等关键环节。
项目详情
个人职责：
  • 负责整个项目的大型框架搭建，确保系统的稳定性和可扩展性。
  • 针对客户和产品经理提出的需求进行深入分析，并优化实现方案，以确保产品质量和用户体验。
  • 负责代码分支维护，确保代码的版本控制和协作效率。同时，进行功能拆分和工时估算，以提高开发效率 and 项目管理能力。
  • 主导开发部分模块及子系统：如会员中心，电商中心、短信发送、统一认证平台、装修中心等。
业绩：
  • 使用 unplugin-vue-components 和 unplugin-auto-import 实现了按需导入和自动导入组件。
  • 配置 @originjs/vite-plugin-federation，实现了大型系统不同子系统间的模块联邦（远程组件）。
  • 设计并实施了基于 OAuth2 协议的统一认证中心单点登录系统，确保了不同子系统的用户体验。
  • 配置 Jenkins 和 Git，实现了提交 Git 自动化部署前端项目至服务器，简化部署流程。
  • 参与度 90% 以上。
90%+ 项目参与度
SSO OAuth2 单点登录
前端开发组长 / 架构设计 查看项目

飞利浦健康生活Lab管理系统

2021.09-2024.04
Vue2.x全家桶Element UIAxiosVuex动态组件
项目概述：参与飞利浦健康生活Lab管理系统的前端开发，目标是构建一个面向消费者的ToC内容管理平台，集成CEM系统和电商系统等多种功能。
项目详情
个人职责：
  • 框架搭建：负责搭建前端开发框架，确保项目的技术基础和结构合理。
  • 可视化装修模块：开发可视化装修功能，使用户能够轻松定制和优化界面布局。
  • 权限管理模块：设计并实现权限管理系统，确保平台的安全性和用户访问控制。
  • 功能迭代：持续优化和更新平台功能，提升用户体验和系统性能。
业绩：
  • 封装各种通用组件及函数、自定义指令，上传组件、axios 请求、工具类函数、权限校验等。
  • 开发并封装了动态组件和可视化装修功能，为用户提供了更灵活的界面定制和交互体验。
  • 在线问卷模块功能，动态可视化配置问卷及展示。
  • 参与度95%以上，包括：商品模块、活动模块、订单模块、各类定制化活动功能开发。
95% 项目核心参与度
灵活定制 可视化装修与问卷
前端开发 查看项目

飞利浦健康生活Lab小程序

2021.09-2024.04
uniapp(vue2)vuexpixi.jsfabric.jsIntersectionObserver
项目概述：面向消费者的微信小程序项目，集成CEM系统和电商系统等多种功能。
项目详情
个人职责：
  • 框架搭建：负责搭建前端开发框架，确保项目的技术基础和结构合理。
  • 提供有效的技术+业务解决方案，确保功能按期上线，为产品的持续迭代和优化做出了重要贡献。
  • 各种复杂活动开发，如：以旧换新、礼品卡、各类品牌联名活动、女神节画廊等、语音祝福、商品镭雕定制等活动。
  • 复杂效果实现，如：用户DIY宇航员、拼图游戏、抽奖翻牌效果、礼品卡自定义文案及海报生成、语音录制与播放效果。
  • 大部分模块独立负责，如：用户授权注册、订单相关、购物车、可视化装修效果（首页、商城首页、自定义活动页）等。
业绩：
  • 使用platformize-pixi、pixi-actions 集成至微信小程序实现飞利浦元宇宙活动（3D空间）。
  • 实现了模块曝光等埋点事件上报功能，通过 IntersectionObserver 最佳方案监测页面元素的可见性。
  • 使用正则搜索替换编辑器中部分标签，实现自定义编辑器小程序中展示，包括：视频、图片、跳转链接等效果。
  • eventBus方案实现全局公用注册组件展示。
  • 自定义tabbar实现带展开效果底部导航栏。
  • 使用fabric.js管理端配置定制位置并根据比例保存，以实现小程序镭雕定制所需定位信息。
  • 小程序手写放大、缩小、旋转、移动等交互效果，并按比例实现二倍放大编辑。
3D元宇宙 pixi 互动空间
镭雕定制 手势交互与定位
前端开发 查看项目

电商小程序（分包开发集成至主包）

2022.08-2023.11
TaroTypeScript微信原生Node.js fsIntersectionObserver
项目概述：为某大型电动车集团以分包形式定制开发品牌电商微信小程序，包含：可视化配置商城首页、商品、购物车、各类电商活动、下单、订单模块等。
项目详情
个人职责：
  • 进行Taro分包模式调研并搭建项目结构。
  • 开发自定义装修模块呈现、购物车、分类等部分模块及子系统。
  • 分包打包及合并至主包文档梳理。
  • 负责分包打包并将其合并至主包，整理相关文档。
业绩：
  • 由于前期需求存在原生tabbar需使用商城首页，则使用原生微信小程序开发商城首页。
  • 实现多种热门自定义配置页面模块，包括图片热区、商品组件、视频、轮播视频、轮播图片等，以满足客户对个性化页面的需求。
  • 使用Node.js中的fs模块，实现自动化文件转移至对应文件夹，并将分包打包成zip文件，便于与对接方合并至主包，确保交付流程高效顺畅。
  • 使用 IntersectionObserver 技术，实现对数据埋点-曝光事件的监听及上报功能，为客户提供数据分析和用户行为跟踪的支持。
  • 根据环境变量配置basePage，解决开发环境下不同分包路径问题，提高开发效率，确保代码的可维护性和可移植性。
高效交付 Node.js fs 脚本
秒开 原生与Taro混合
前端开发 查看项目

梦幻家AI小程序

2023.11-2024.01
TaroTypeScriptTailwind CSSCSS动画智能轮询
项目概述：一款ToC面向儿童的AI绘画小程序，主要功能为文字/语音智能绘图，合作绘画，排行榜，绘画广场点赞、收藏、分享和评论等。
项目详情
个人职责：
  • 负责整个项目的框架搭建，技术难点攻克，项目进度把控，工期预估与分配。
  • 针对项目需求，主导完成了多个核心模块的设计与开发，包括但不限于用户交互界面、数据处理模块等。
  • 在项目开发过程中，积极推动团队技术进步，定期组织技术分享会，提升团队整体技术实力。
  • 与产品、设计师共同探讨用户视觉体验、交互体验，提出可实行性方案。
业绩：
  • 使用css（伪元素+box-shadow+animation）实现动态星空背景，通过精确控制动画的细节 and 性能优化，成功在实现独特视觉效果的同时，确保了页面的快速渲染和较低的性能消耗。
  • 在同一页面中集成了多种业务功能，通过封装多类组件，显著提高了代码的复用率和可维护性。
  • 创新性地使用轮询技术，实现了对服务端AI绘画进度的实时监控，确保用户可以实时获取进度信息，极大地提升了用户体验。
低能耗 CSS 星空特效
实时 AI 绘画进度轮询
前端开发组长 查看项目

Keenon官网CMS系统

2023.08-2024.04
Vue3全家桶TypeScriptViteElement PlusI18n
项目概述：为擎朗智能公司定制开发cms系统，自定义官网页面所有模块并支持多国语言。
项目详情
个人职责：
  • 可视化装修模块：开发可视化装修功能，使用户能够轻松定制和优化界面布局，并生成可直接拼接的html代码。
  • 27国多语言：数据/界面层隔离，n个国家语言文章、页面的配置及发布。
  • 功能迭代：持续优化和更新平台功能，提升用户体验和系统性能。
业绩：
  • 页面可视化功能开发，并根据配置项动态生成html代码片段，使运营人员可随意配置任何页面。（核心功能）
  • 使用OAuth2 协议的统一认证中心单点登录系统，确保了不同子系统的用户体验。
  • 在项目开发过程中，注重代码质量和系统性能的优化，多次发现并修复潜在的漏洞，增强了系统的稳定性和可靠性。
27国语言 多语种支持范围
高效发布 可视化生成HTML
前端组长 查看项目

展商秀-web & 管理后台

2020.04-2021.07
Vue 2Vant UIWebSocketiView虚拟列表
项目概述：会展直播与音视频在线展台管理系统，为参展商和观众提供实时的线上音视频会话、双通道实时聊天及直播会展服务。
项目详情
个人职责：
  • 负责PC端与移动端H5核心模块的编写，确保跨端视觉体验的一致。
  • 独立开发会展直播与音视频展台系统，使用 WebSocket 建立双向实时聊天及直播通信。
  • 设计高复用的表单与组件系统，实现管理后台（Vue2 + iView）海量展商信息的录入与管理。
业绩：
  • 使用 WebSocket 自定义双通道协议，实现高并发、低延迟的会展现场互动与实时客服聊天。
  • 针对大数据量报表，引入虚拟列表与分批渲染机制，解决海量数据带来的DOM卡顿，首屏 FPS 稳定在 60 帧。
  • 针对音视频通话异常及网络抖动，设计了重连与心跳机制，确保网络状态异常时仍能自动复连。
60 FPS 虚拟表单帧率
实时 WebSocket 双通道
前端开发 查看项目

Corrface 全瓦通

2020.04-2021.07
mpvue微信小程序Webpack分包优化
项目概述：针对瓦楞纸箱包装行业的 B2B 撮合交易平台及微信小程序，提供跨角色的展商、买家、观众多视图切换和在线交易撮合。
项目详情
个人职责：
  • 使用 mpvue 框架负责撮合交易平台小程序的开发与重构。
  • 负责微信小程序分包方案的引入与实施，解决 2MB 主包体积上限问题。
  • 进行静态资源按需加载与冗余依赖优化，保证低配置设备上的启动速度。
业绩：
  • 制定并落地小程序分包加载方案，成功将主包体积极致压缩在 2MB 以内，首包加载速度提效 40%。
  • 通过对全局静态资源进行阿里云 OSS 托管并开启 Gzip 压缩，显著减少小程序初始下载耗时。
  • 封装通用的跨端微信 API 适配器，统一了不同基础库版本下的原生接口调用逻辑，提高代码兼容度。
< 2MB 分包极致压缩
+40% 首包加载耗时
前端开发 查看项目

智慧客流监控大屏

2019.04-2020.04
VueEchartsheatmap.jsCanvas离屏渲染
项目概述：智慧城市与商超客流指标实时监控大屏及空间轨迹热力图分析系统，通过可视化技术展现多维度流量指标和定位轨迹。
项目详情
个人职责：
  • 利用 Vue + Echarts 独立开发大数据驾驶舱多维度客流监控大屏。
  • 在移动端和后台系统集成 heatmap.js，根据室内蓝牙定位信标数据动态绘制客流量空间轨迹热力图。
  • 负责多图表高频刷新与重绘性能优化，解决 CPU 过载与浏览器假死问题。
业绩：
  • 通过 requestAnimationFrame 和图表池复用机制，实现万级多源数据高频重绘，将大屏运行时帧率稳定在 55-60 FPS。
  • 集成 HTML5 Canvas 离线缓冲与离屏渲染技术，有效解决了数万个轨迹热力图坐标在低配终端上绘制卡顿与浏览器过载问题。
  • 实现了多路图表联动与屏幕自适应适配方案，保障在不同分辨率 of 超宽拼墙大屏上完美无缝缩放展示。
60 FPS 图表重绘帧率
万级点位 热力图极速重绘
0 卡顿 低配设备流畅度
前端开发 查看项目

多人协同记账小程序

一周完成
微信小程序Cloudflare WorkersD1 SQLiteDurable ObjectsECharts
项目概述：面向线下多人娱乐对局（麻将、扑克、掼蛋等）场景的实时联机记分与对账全栈小程序。支持房间创建、扫码加入、多端即时记分、智能茶水费自动结算、局势趋势分析、对账单分享等核心功能，满足线下娱乐的快速记账与账目对齐需求。
项目详情
个人职责：
  • 独立负责项目从 0 到 1 的全栈架构设计与前后端开发，包括后端 API 接口设计、数据库表结构优化、Durable Objects 长连接同步以及前端所有交互与 UI 设计。
  • 负责项目的云端部署与轻量化调优，基于 Cloudflare Serverless 架构实现零成本高并发运行环境。
业绩：
  • 基于 Cloudflare Durable Objects 构建了低延迟的 WebSocket 实时广播同步方案：实现了多人同时在房记分时，分数值与在线状态在多端屏幕上的 0 延迟同步渲染，提供极佳的协同体验。
  • 创新设计了“智能连接休眠与触屏唤醒”机制：针对 Serverless 长连接额度限制，实现了客户端 5 分钟无操作/无数据更新自动断开连接以节省资源，并利用事件冒泡机制实现点击屏幕/开始记分时瞬时无感重连，将计算开销（GB-s）降低了 80% 以上。
  • 实现基于版本号比对的低消耗轮询退避方案：通过在 D1 数据库层面进行版本戳（Version）对比，仅当本地版本落后时才执行完整的联表及流水查询，避免了传统轮询带来的无效数据库读取，将 D1 读取次数降低了 90% 左右。
  • 引入微信原生 ECharts 动态计算并渲染回合局势走势图：通过逆序时序算法，动态为流水记录分配 R1、R2、R3... 的局数编号，并与走势图的拐点进行 100% 对齐，提供直观的局势走向和资产起伏可视化分析。
  • 设计了严密的安全准入与转发验证机制：在 /api/room/join 接口层面，通过联合查询快速校验当前用户是否属于房间内成员，在已结算状态下实现“老玩家随时重进查看对账单，非成员新用户强制拦截”的权限闭环。
  • 优化弱网及熄屏生命周期交互：合理利用小程序 onShow/onHide 生命周期，实现熄屏自动断开连接、亮屏主动补齐数据并重连；设计并实现了包含 🟢已连接、🟡连接中、⚫已休眠 三色灯在内的连接状态条，提供直观的用户心理预期。
  • 打磨极致移动端交互与 CSS 布局调优：重构并精简了结算弹窗，采用 flex 弹性布局在单行内平铺展示功能按钮，解决由于 font-weight 状态改变导致文字宽度抖动的常见布局问题，提升了整体 UI 的精致度与流畅感。
0 延迟 WebSocket 实时广播
-80% 开销 休眠与无感唤醒
全栈开发（独立负责）
小程序二维码 微信扫码体验
05 / GET IN TOUCH

联系我

CONTACT

FOR ME

灵感 代码 梦想 未来

学习是一个充实愉悦的过程
喜欢尝试，期待新鲜事物
前端即兴趣，兴趣即未来
行路有良友，便是捷径
期待有机会与您共事！

微信联系二维码
QQ:235703780
© Ashang | 鄂ICP备19006107号-1
Ashang's resume