优化

构建慢到怀疑人生，打包5分钟起步 昨天上线前最后优化一波，本地改完代码保存，热更新直接卡10秒起，气得我差点把键盘扔了。这哪是开发，简直是渡劫。更离谱的是 build 一次要5分多钟，CI流水线跑着都...

先说结论：我现在基本只用 Vite 的预构建 资源合并这事儿我折腾了好几年，从最早手动 concat JS 文件，到 Grunt、Gulp 配置一堆 task，再到 Webpack 的 code sp...

项目初期的技术选型 上个月接手了一个老项目的性能优化任务，页面首屏加载动不动就七八秒，用户反馈说“点开等得都想关了”。打开 DevTools 一看，瀑布流里全是静态资源，JS、CSS、图片，每个都重新...

我的写法，亲测靠谱 Base64 内联这东西我用得不少，尤其是在做 H5 活动页、营销页这种对首屏加载速度要求高的场景。简单说就是把小图片直接转成 Base64 字符串塞进 CSS 或 HTML 里，...

说白了，WeakMap 就是拿来防内存泄漏的 我最近在重构一个组件库的时候，又碰上了那个老问题：DOM 节点绑定了数据，但组件销毁后这些引用还在，内存占用蹭蹭涨。以前都是靠手动清理，写一堆 destr...

骨架屏又搞我心态了 今天上线前最后检查，发现首页加载时骨架屏闪一下就没了，用户根本没感觉到它的存在。本来是想优化首屏体验的，结果搞得像是出了bug——白屏都没这么尴尬。 一开始以为是接口太快，但本地跑...

项目初期的技术选型 这个项目是个中后台系统，页面里图标特别多，从导航菜单到操作按钮，再到状态标记，少说也得上百个。一开始我寻思着用 SVG 雪碧图吧，毕竟现在主流都推 SVG，性能好、可缩放、还能做动...

又翻车了，空状态组件差点被产品退回重做 昨天上线前最后一刻，测试群里突然甩来一张截图：列表页数据为空的时候，页面直接白屏了。我第一反应是接口挂了，结果一查发现接口返回的是 []，结构没问题。问题出在—...

先说结论，别整那些虚的 我搞过好几个中大型项目，打包优化这块没少折腾。关于 sideEffects 配置，很多人还在懵：到底要不要写？写了有什么用？tree-shaking 真靠它吗？ 我的结论是：如...

先看效果，再看代码 我最近接手了一个老项目，构建时间从原来的十几秒飙到了快一分钟。Webpack 那套配置已经复杂到没人敢动，每次改点东西都得祈祷别出问题。直到我试了 esbuild —— 你猜怎么着...

说说手势冲突这事 最近在做一个移动端H5页面，碰到了经典的手势冲突问题。滑动列表的时候偶尔会触发底部轮播图的左右滑动，用户体验简直灾难。这个问题其实挺常见的，今天就来对比一下几种常用的解决思路。 我比...

一个让人头疼的数据结构设计 最近做了一个复杂的后台管理系统，涉及到组织架构的层级管理。需求是用户可以在前端随意拖拽节点来调整组织关系，包括把上级节点拖到子级节点下面形成循环依赖。听起来就很危险，但业务...

优化前：卡得不行 最近接手了一个老项目，CSS文件直接给我干到了800KB，没压缩过的原始文件。打开页面那叫一个卡，Chrome DevTools显示CSS解析时间居然要3-4秒，首屏渲染慢得要命。用...

这次打包慢到让人怀疑人生 上个月重构老项目，Webpack升级到5，结果构建速度慢得离谱。本地开发热更新要等十几秒，生产环境打包更是要两分钟起步。同事都快疯了，每天光等打包就得浪费好几个小时。 折腾了...

Dead Code 的识别工具，别瞎手动找 很多人一听到死代码清理就开始手动翻代码，这是最蠢的做法。我之前接手一个老项目，接手人告诉我有大量死代码，让我手动清理。折腾了两天发现根本找不完，而且还不敢删...

我的写法，亲测靠谱 说实话，Suspense这玩意儿刚出来的时候我是拒绝的，总觉得React团队又在造轮子。但是用了两年下来，发现它真的能解决很多实际问题，特别是数据加载这块的用户体验。 我现在的做法...

先说说我为啥要重新整理数据结构 最近重构一个老项目的搜索功能，用户输入关键词后要返回相关商品列表，但数据量特别大，每次搜索都卡得不行。看了眼控制台，原来是从后端返回了一个复杂的嵌套对象，前端还要做各种...

我的预获取策略，经过多个项目验证 说实话，预获取这玩意儿我一直觉得挺玄学的，直到去年重构那个电商项目才真正搞明白怎么玩。之前总是觉得预获取就是简单地提前加载资源，结果经常遇到缓存污染或者浪费带宽的问题...

Fixed布局里动态内容撑破容器的问题 今天又遇到了一个fixed定位的高度问题，页面里有个弹窗是固定高度的，结果里面的内容动态加载后直接把底部给顶出去了。之前类似的坑踩过好几次，这次记录下完整的解决...

响应式图片不是什么新技术，但这次项目真把我搞懵了 最近做的那个电商项目，图片这块儿本来觉得挺简单的，结果上线后发现移动端加载慢得要命。几十张商品图全是2MB以上的高清大图，在手机上加载个页面都要等好几...