团队要做一个多人协同编辑的功能,传统的后端合并冲突加乐观锁在多人同时改同一段内容时很难写干净;记录一下改用 CRDT、用 Yjs 落地协同文档的过程,以及这套方案要付出的代价。
AI 写出的代码在单文件里看着挺对,一放进真实仓库就出问题——记录几条实用习惯:先喂上下文和约束、先让它读代码拆计划、每轮改完必测,以及上下文窗口、工具调用、评测这些容易被略过的细节。
Zod 4 的性能改进和 API 变化落到真实项目里:表单校验、接口出入参解析、和 TypeScript 类型互推,以及 schema 复用时容易踩的坑。
大型前端项目的类型检查、编辑器响应和 CI 等待为什么会拖慢反馈链路,以及我会怎么评估 TypeScript 7 Beta(Go 重写)的性能收益和升级风险。
把项目的 lint 和格式化从 ESLint+Prettier 换成 Biome 的过程:速度提升有多明显、规则迁移缺了什么、以及哪些场景我还是留着 ESLint。
Rolldown 把 Vite 的打包从 esbuild/Rollup 双引擎统一成一套 Rust 实现,记录我在中型项目里切过去的体感、兼容性问题和回退策略。
从 v3 升到 v4 的真实迁移过程:Oxide 引擎带来的速度变化、配置从 JS 搬到 CSS、@theme 和 CSS 变量怎么用,以及几个升级时踩的坑。
记录把 React Compiler 接入一个真实项目的过程:它替我做了哪些手动 memo 化、哪些写法会让它直接放弃优化、以及上线前怎么验证它没改坏行为。
Bun 的速度收益到底落在哪一段反馈链路,兼容性能扛到什么程度,成熟前端项目又为什么不该一口气全量迁移,从低风险脚本切入才是稳妥的验证方式。
调通工具只是开了个头,参数错了、接口超时、结果不完整,这些失败路径没处理好,Agent 很快会变得不可靠;这篇讲清楚怎么统一处理工具错误、参数校验和调用日志。
同一个错误码在不同页面提示不一致、表单字段错误只会弹 toast,这篇讲清楚怎么把网络错误、业务错误、表单错误和页面反馈重新分层。
记录和 AI 编程助手协作时更稳定的工作方式:先读代码、拆任务、说明改动,再执行和验证。
用户输入一旦被当成 HTML 插进页面,风险就已经埋下了:XSS 的常见入口、富文本清洗、Token 存储的取舍,以及 CSP 从 Report-Only 到正式收紧的落地路径。
用 Docker Compose 管理数据库、缓存和消息队列等开发依赖,减少本机环境差异,讲清楚数据卷什么时候会保留、健康检查该测到什么程度才靠谱。
国际化不是把文案抽成 JSON 那么简单:文案 key 怎么组织才不冲突、日期数字格式为什么不能手写、长文案怎么撑坏布局、RTL 和翻译流程各自要提前踩的坑。
把几十个字段都塞进一个 `useState` 对象,短期顺手,字段一多就会失控——字段状态、校验分层、联动逻辑和提交错误各自该放在表单架构的哪一层。
构建慢不一定是打包工具的锅:依赖体积、类型检查覆盖范围、缓存命中率、代码生成方式,任何一处出问题都会拖慢构建,换工具往往只是把慢延后了。
用户已经觉得页面慢了,开发手上却没有任何证据——Web Vitals 怎么采集才可靠、错误监控怎么带上下文、接口耗时和用户行为怎么串成一条能复现问题的时间线。
覆盖率 80% 不代表核心链路安全:测试资源该按风险而不是按代码行数分配,单元测试、组件测试、E2E 和 Mock 各自该守住哪一层。
微前端不是性能优化手段,也不是万能拆分方案,它换来的是组织协作上的独立交付,代价是运行时复杂度——判断该不该拆、边界怎么划才是真正的难点。
Node.js 里的 fetch、Web Streams、AbortController 和内置测试工具正在和浏览器端趋同:本文梳理超时取消怎么用 AbortSignal 组合实现、SSE 流式解析里多字节字符截断怎么正确 flush、以及原生 test runner 能替掉多少第三方依赖。
TypeScript 类型只能保证前端自己代码里的一致性,保护不了后端实际返回的数据——接口类型来源、错误码结构、运行时校验和 Mock 数据,怎么设计才能真正拦住脏数据。
Vite 的开发体验快不代表生产构建就稳:依赖预构建缓存失效、Rollup 分包策略、环境变量该暴露给谁、CJS/ESM 混用踩的坑,以及发版窗口期 chunk 404 该怎么从架构层面接住,这些才是工具链落地时真正要处理的问题。
同一个主色在项目里同时以 `#1677ff`、`rgb(22, 119, 255)`、`var(--blue-6)` 三种形式存在,谁也说不清哪个是标准——Design Token 怎么分层、怎么落地才能让颜色和间距不再散落在业务代码里。
桌面端选型不该从'哪个更新潮'开始,该从三个问题开始:目标机器是什么环境、包体和内存有多敏感、团队有没有人能写 Rust。拿一个内部工具在 Tauri 1.5 和 Electron 28 上各跑了一遍,体积、内存、WebView 兼容性、Rust 侧 invoke、生态成熟度的实测差异都在这里。
了解 Docker 的基础知识,记录前端和 Node 项目在镜像构建、缓存、多阶段构建、健康检查和运行安全上的实践。
XSS、开放跳转、依赖漏洞这些前端安全问题往往不需要高深攻击技巧,一个未过滤的富文本就能捅出娄子。这篇把日常项目该守住的几条底线一条条讲清楚。
CSS 项目做久了没人敢删、改一处崩一片,常被归咎为选型不对,其实根子在归属不清。职责分层、cascade layers、设计变量、命名归属和第三方覆盖集中,才是治理样式的抓手。
包体积膨胀真正的成本不在压缩,而在分析、拆分和取舍:图表库富文本被打进首屏、公共 chunk 越抽越大、一行 import 引回大依赖,本文讲清楚这些代价怎么算、怎么用体积预算把它卡住。
组件的可复用性不等于可配置项越多越好,边界该划在哪:基础组件收着做、业务组件贴场景做,props 表达语义而非样式细节,扩展口只当逃生通道。这篇把这几条判断标准讲清楚。
E2E 测试该测什么、不该测什么:关键路径优先于覆盖率,选择器、网络等待、登录态复用和 CI 稳定性都要服务于这个取舍。
代码评审真正该拦的是接口失败后 loading 不恢复、权限变化菜单不刷新、按钮能重复点这类维护风险,而不是分号和命名;这篇讲怎么按状态流转、异常路径、组件职责给同事讲清楚一条评审意见值不值得改。
服务端状态和本地状态是两回事:缓存新鲜度、mutation 后的失效范围、错误结构统一,这些 React Query 要解决的问题,手写 loading/data/error 很难兜住。
拆成 Monorepo 要担的代价是什么:pnpm 的硬链接和符号链接策略跟 npm/yarn 的提升策略在幽灵依赖上表现不一样,包之间怎么引用、依赖装在哪一层、CI 要不要全量跑,这些问题不先想清楚,多包项目很快会变成一个更大的混乱仓库。
scripts 目录堆到没人敢删——Node 自动化脚本写得靠不靠谱,看的是它该失败的时候会不会主动失败。
从 lint、test、build、缓存、预览环境和回滚几个环节,记录我在前端项目里使用 GitHub Actions 搭建发布流程的思路。
全局样式、命名、变量、第三方覆盖到 @layer,讨论中型前端项目里样式优先级怎么从失控收回来。
localStorage 用着顺手,但容量、同步读写和跨标签页这几个限制不搞清楚,迟早会踩到该用 IndexedDB 却没用的坑。
文件上传的难点不在选文件,而在选完之后:进度从哪来、取消和失败怎么区分、大文件怎么分片、并发怎么控制。整理这些机制背后的具体判断。
测试工具不缺,缺的是判断标准:什么逻辑值得写单元测试,什么流程只能靠 Cypress 兜底,团队新引入的 Vitest 又该放在什么位置上尝试。
写 Vite 内部插件时,钩子名字只是入口,真正容易出问题的是调试方式、产物路径和插件该不该管到哪一步。
Git 协作出问题时,很少是命令不会敲,更多是提交粒度、分支约定和冲突处理没有共识。
老项目拆模块时,语法不是重点,依赖关系、循环引用和构建工具怎么理解 ESM/CJS 才是坑。
把 Vue CLI 项目切到 Vite,命令改起来只要五分钟,真正的成本在环境变量、路径别名、静态资源和 CommonJS 依赖这些藏在历史代码里的构建假设上。
Vite 开发环境跳过打包直接用浏览器原生 ES 模块,冷启动和热更新为什么比 Webpack 明显快;同时记录 1.x 版本生态尚浅、只适合小范围尝鲜的真实局限。
新项目起步该选 Vue CLI 还是 Vite,不该按新旧来判断,而要从生态成熟度、团队熟悉度、生产验证程度、插件完整性这几条核心维度起步,逐一对照再下结论。
中后台巨石应用要不要拆成微前端,光看社区文章下不了结论。拿内部一个报表子系统对 qiankun 2.0 做了两周试点:主/子应用的最小接入改造、样式冲突和全局变量的第一印象、公共依赖的现实困境,以及为什么最后的评估结论是小范围试点、不急于全面推开。
梳理把 Vue 项目从 Vue CLI 迁到 Vite 的实际迁移代价:自定义 Webpack 配置、别名、环境变量、代理规则要怎么对应过去,以及为什么这个阶段只适合迁一个边界清楚的小项目。
前端联调被后端进度卡住,本质是缺一层可控的接口供应层。用 Express 搭独立 mock 服务的完整方案:中间件模型和路由组织、http-proxy-middleware 做未 mock 接口的透传、mock 数据热更新、延迟与异常模拟,以及它和 devServer.proxy 的分工、要不要往 BFF 方向演进的边界判断。
HappyPack 已经停止维护,webpack 4 官方更推荐 thread-loader、cache-loader 这条路,但项目里的历史配置到底要不要换、什么时候该换,值得掰开讲清楚。
线上 JS 报错没人知道、用户截图报障才发现白屏,暴露的是前端错误监控的缺位。window.onerror 和 unhandledrejection 各自能捕获什么、资源加载错误为什么要用捕获阶段监听、跨域脚本的 Script error 怎么破,加上错误聚合去重和 Sentry 接入的取舍,一套采集上报层的完整落地记录。
线上堆栈只剩 `t.default.a` 这类压缩符号时,问题已经不只是定位某个组件,而是要把 source map、构建产物和断点映射整条链路一起查清。
首屏包太大时,最怕的是人人都在猜。这里从一张体积分布图出发,把 webpack-bundle-analyzer 怎么定位重模块、重复依赖和错误拆分讲清楚。
只背“loader 处理文件,plugin 扩展功能”远远不够。这里从“让 webpack 看懂 `.md`”和“在构建流程里外挂一项能力”两个任务出发,把二者职责边界讲清。
线上白屏时,如果你连目录、日志、进程和端口都不会查,`ssh` 上去也只能发愣。这里按一次真实排查路径,把前端最先该会的 Linux 命令串起来。
同一个 npm 包在 webpack 项目里能正常 `import`,到了 Node 脚本里一 `require` 却拿到 `undefined`。这里顺着这个差异把 CommonJS 和 ES Module 的加载模型重新讲清。