博客

优化前：卡得不行 上个月接手一个老项目，主应用用 qiankun 搞了 5 个子应用，开发环境跑起来还行，一到测试环境就卡成 PPT。用户点一下菜单，等 3 秒才加载出子应用，有时候直接白屏。我本地测...

缓存更新搞死我了，最后靠加个时间戳搞定 上周上线一个新功能，用户反馈说改了配置后刷新页面还是旧数据。我第一反应：又是缓存问题。但这次不是浏览器缓存静态资源，而是 API 接口返回的数据被缓存了，而且是...

为什么我还在纠结 Carlo 这个东西？ 最近一个 Electron 项目跑得有点卡，用户反馈“启动慢得像在加载整个宇宙”，我琢磨着是不是该换轻量方案。正好看到 Carlo——Google 出的基于 ...

先看效果，再看代码 我第一次用 MobX 是在重构一个老项目的状态管理模块。当时 Redux 写得又臭又长，改个状态要改七八个文件，烦死了。后来一咬牙切了 MobX，结果发现：真香。 核心就一点：你不...

前端质量控制，到底该用哪种方案？ 最近项目上线后被 QA 抓了一堆 UI 一致性问题，比如按钮圆角不统一、颜色用了十几种、间距忽大忽小。我意识到光靠 Code Review 和口头约定根本挡不住这些“...

先看效果，再看代码 最近接手一个老项目，用的是 Vue 3 + Vite，但打包后体积大得离谱，首屏加载慢得像在等泡面熟。折腾了几天，把构建时间从 45s 优化到 12s，首屏资源从 4.2MB 压到...

项目初期的技术选型 上个月接了个需求，要做一个动态签名板，用户能在手机上手写签名，然后保存成图片。听起来挺简单的，但一上手才发现水挺深。最初我考虑用 SVG，毕竟它支持矢量、缩放清晰，而且 DOM 操...

为什么我要折腾 UI 覆盖这事儿？ 最近做了一个带弹窗的后台管理系统，用户反馈说“点弹窗后面的按钮还能触发操作”，我一测果然——modal 弹出来后，底下的表单居然还能交互。这问题说大不大，但真要出事...

为什么我要折腾 upstream 这个东西？ 最近在搞一个数据聚合的项目，前端需要从多个后端服务拉数据，但又不想让客户端直接暴露一堆接口地址。这时候就想到用 upstream（上游）代理——说白了就是...

优化前：卡得不行 上个月搞一个移动端项目，用户反馈“一进通知页手机就发烫”“点一下卡三秒”。我一开始还不信，自己打开 devtools 看了一眼——好家伙，首屏加载花了 5 秒多，滚动列表还掉帧到 1...

为啥要折腾右键菜单？ 最近在搞一个富文本编辑器，用户说“能不能加个右键菜单，像 Word 那样点一下就能复制格式、插入图片”。我一想，这不就是个 ContextMenu 嘛，简单。结果一动手，发现水还...

优化前：卡得不行 上周重构一个老项目，里面有个下拉菜单（Dropdown）组件，点开后加载 300+ 个选项，直接卡到页面白屏。不是“稍微卡一下”那种，是点开后整个浏览器标签页失去响应，鼠标转圈 3 ...

又踩坑了，移动端旋转手势搞崩了整个页面 上周在做一个移动端的图片预览组件，用户可以双指缩放、单指拖动，当然也得支持旋转。本来以为用 transform: rotate() 搞定就完事了，结果一上真机，...

为啥要自己写个抓包调试工具？ 上个月接手一个老项目，前端用的是 Vue 2 + Axios，后端是 PHP。问题出在：用户反馈某些操作没反应，但控制台和 Network 面板里啥都看不到。一开始以为是...

又踩坑了，React 里 useEffect 依赖项没写对，数据总对不上 上周改一个用户资料页，页面加载后要从接口拉取用户信息，然后根据用户角色动态设置页面标题。结果每次刷新页面，标题要么是空的，要么...

我的写法，亲测靠谱 做 PWA（Progressive Web App）项目时，manifest.json 是绕不开的一环。我最早以为它就是个配置文件，填几个字段就行，结果上线后发现图标不显示、横屏被...

又踩坑了，Toast 被遮挡还无法自动关闭 前几天在项目里加了个 Toast 轻提示，本来以为就是调个 UI 库的事，结果上线前测试时发现：有些页面弹出 Toast 后根本看不见，或者点了按钮后 To...

项目初期的技术选型 去年接了个后台管理系统，用户能提交富文本、表单、甚至上传 CSV 导入数据。一开始我心想，不就是个 CRUD 吗？前端校验一下格式，后端再存数据库，稳得很。但上线前安全团队扫了一波...

缓存雪崩？别慌，我用这几招稳住了 上周上线一个新功能，凌晨三点被告警电话吵醒——数据库 CPU 100%，接口全部超时。查了一圈，发现是缓存集体过期，瞬间几千个请求打穿 Redis，直接把 DB 干趴...

先看效果，再看代码 上周给一个 landing page 加了个视差滚动效果，客户看了直呼“高级”。其实核心逻辑就几行，但中间踩了几个坑，折腾了半天。今天直接上干货，把亲测有效的方案和容易翻车的地方都...