我是 huatree，做了7年前端开发。平时写写代码，踩踩坑，偶尔把踩过的坑记下来，免得下次再踩同一个。技术更新很快，但写代码这件事本身一直让我觉得有意思——尤其是它真的帮人解决了某个问题的时候。
能力概述
- 深耕前端开发7年，具备扎实的 JavaScript/TypeScript 功底，对语言特性、异步编程、内存管理有深入理解
- 熟练使用 Vue 和 React 技术栈进行复杂业务开发，阅读过核心源码，能针对业务场景做框架层面的定制与性能调优
- 丰富的跨端开发经验，覆盖 Hybrid App、React Native、小程序等场景，能独立处理多端兼容、热更新、性能瓶颈等实际问题
- 深入理解 Webpack 构建流程与 Babel 编译原理，具备从零搭建构建体系、优化构建速度、定制 loader/plugin 的能力
- 具备完整的工程化思维，能从零搭建 CI/CD 流水线，落地代码规范、自动化测试、灰度发布等质量保障体系
- 能基于 Node.js 独立开发脚手架工具、构建插件及 Babel 插件，提升团队开发效率与交付质量
- 在多个项目中主导过架构设计与性能优化，涉及首屏加载、包体积治理、运行时性能等方向，有可量化的优化成果
- 注重代码质量与可维护性，在团队中推动过设计模式落地、前端安全规范、TypeScript 迁移等实践
项目经历
国外购物 App（React Native）
项目简介
一款面向海外市场的购物类 App，涵盖商品浏览、购物车、下单结算、订单管理、大促活动等完整电商闭环。支持多语言国际化，集成 Firebase 全链路数据追踪与推送体系，通过 CI/CD 实现多环境自动化构建与发布。
技术栈
- 框架 ：React Native 0.79 + React 19 + TypeScript
- 路由 ：React Navigation（Stack + Bottom Tabs）
- 状态管理与数据层 ：Apollo Client + GraphQL Codegen + AsyncStorage
- UI 与交互 ：React Native Paper + Reanimated 3 + Flash List + Lottie + SVG
- 工程化 ：Webpack（Metro）+ Babel + ESLint + Prettier + Husky + lint-staged
- 构建与部署 ：react-native-config 多环境管理 + Gradle / Xcode 多 scheme 配置 + CI/CD 流水线
- 后端服务 ：Firebase（Analytics / Crashlytics / Remote Config / Dynamic Links / Messaging / Performance）+ Notifee 推送
- 其他 ：i18next 多语言 + Adjust 归因 + Facebook SDK + 相机/相册/地图等原生模块集成
核心成果
- 负责 App 日常业务迭代，覆盖首页 CMS 搭建与动态配置、商品详情/购物车/结算/订单全流程等核心购物链路
- 负责大促活动页面开发与维护，包括 Wait Room（候场排队）、限时抢购、优惠券领取、秒杀倒计时等营销场景，保障高并发下的稳定性与用户体验
- 基于 Firebase 体系（Analytics / Crashlytics / Remote Config / Dynamic Links / Messaging / Performance）完成全链路埋点方案设计与落地，支撑运营数据分析与 AB 测试
- 主导包体积优化，通过拆包策略、资源压缩、依赖治理等手段降低安装包大小，提升下载转化率与冷启动速度
- 基于 React Navigation 搭建并维护路由架构，结合 Reanimated / Flash List 等方案优化列表滚动与页面切换的流畅度
- 搭建多环境构建体系（dev / staging / production），通过 react-native-config 管理环境变量，落地 CI/CD 自动化打包与发布流程
- 处理 iOS / Android 双端兼容性问题，包括刘海屏适配、WebView 交互、相机/相册权限、推送通知等原生桥接场景
- 基于 Apollo Client + GraphQL Codegen 完成数据层封装，统一接口请求、缓存与错误处理，提升开发效率与类型安全
- 集成 i18n 多语言方案，支持英语及多地区语言切换，配合后端完成国际化业务适配
国内电商购物小程序
项目简介
为用户提供好商品、好价格、好服务的购物体验，打造用户优惠，商家实惠的数组生活体验。基于 mPaaS 服务，主要面向小程序。
技术栈
mPaaS、uniapp、Vue、Vuex、uni-simple-router、Webpack、JSBridge、SDK、JavaScript
核心成果
- 主导用户埋点基础搭建，选用通用神策数据及 mPaaS 服务套件 MAS，通过统计和分析客户端流量、性能质量和用户行为等数据，用数据实现产品、运营、推广的决策；
- uni-app 实现小程序及 H5 多端功能统一开发；
- 优化项目中核心流程交互与性能，包括：搜索推荐、客服系统、公共组件、广告投放及 300ms 延
迟； - 主导小程序性能优化，降低代码体积，减小资源加载、首屏渲染耗时；
- 负责日常 to C 的 CMS 迭代研发和维护；
活动专区低代码平台
项目简介
基于特定节假日、促销活动投放商品场景，提供涵盖数据源与加工、页面组装、流程引擎、低代码编辑
器、AI 辅助数据建模、AI 托管式应用构建等功能。
技术栈
Vue、Vue Router、Vue-CLI、pinia、Vite、monaco-editor、TypeScript、husky
核心成果
- 负责平台技术选型、基础架构及方案设计，包括：工程化相关方案设计与落地、核心模块方案设计与实现；
- 制定 eslint、stylelint、commitlint、markdownlint、husky 等工具规范，产出高质量代码；
- 主导页面组装模块设计，选用通用 blocksuite 方案，丰富页面元素，高度可定制；
- 服务编排及流程引擎等内容实现；
电商运营平台
项目简介
为商家提供一站式电子商务解决方案的服务体系，它涵盖了商品交易、物流配送、售后服务等环节，旨
在帮助商家提高销售业绩、优化客户体验并增强品牌价值。
技术栈
React 、React Router、Redux、Ant Design、Webpack、TypeScript
核心成果
- 负责日常 to B 的 CMS 迭代研发和维护；
- 主导设计并研发动态表单部分，减少代码冗余，提高开发效率；
- 主导性能优化，实施代码分割和懒加载策略，减少应用的初始加载时间；
- 选用通用微前端架构，跨应用状态管理、通信，路由分发、样式隔离、沙箱环境等；
UI 组件库、脚手架、基础库
项目简介
为提升开发效率，降低团队成员协同开发成本，统一规范并开发统一脚手架工具与基础库，并根据以往
业务需求设计并封装大量业务组件以供快速开发新需求功能。
核心成果
- 与设计师共同推动 UED 方案落地，覆盖了电商常用的 UI 组件库；
- 参与主导内部库开发脚手架实现，包含集成各类规范预设、基础模板兜底以及常用脚手架命令等功能；
- 定制化基础库，包括为 JSBridge 、埋点；
想了解更多，点此查看。