小迪博客 · 前端工程与效率工具的长期笔记

精选内容

文章 · 工程化

做一个小而稳的内容站：从选题池、写作节奏到发布流程，我们把能省掉的环节都省掉了，只留下真正影响读者体验的那几件事

长标题在首页会怎么收，取决于每个位置能放几行。

文章 · 工程化

一次持续了三个季度的性能优化复盘：从首屏指标全线告警到稳定达标的完整过程，包括我们试过的所有错误方向、被证伪的假设、最后真正起作用的少数几件事以及为此付出的取舍

首页负责让人想点，详情页负责把话说完。

最新

文章 · 设计系统
阿斯顿阿斯顿
郭富城的文章
2026-11-047123
文章 · 工程化
测试标题
就斤斤计较
2026-10-31120123
文章 · 工程化
用增量构建替代全量构建，以及我们最终采用的方案
把踩过的坑按顺序写清楚，附上最终采用的方案与代价。
2026-09-231.2K林深
文章 · 脚本
移动端适配的三种方案，以及我们最终采用的方案
复盘一次真实场景，指标、工具与最后的选择都写在里面。
2026-09-231.1K林深
文章 · 调试工具
接口错误处理的收敛，以及我们最终采用的方案
先给结论，再拆过程：哪些做法有效，哪些只是看起来有效。
2026-09-24933林深
文章 · 安全
一次数据库索引失效的复盘，以及我们最终采用的方案
这篇整理了我们在这件事上的实践，包含可以直接复用的清单。
2026-09-24778林深
文章 · 命令行
用 Web Worker 解决主线程卡顿，以及我们最终采用的方案
从问题出现到方案落地，记录每一步判断与最终结果。
2026-09-25653林深
文章 · 效率工具
大型仓库的分包与按需加载，以及我们最终采用的方案
把这次改造的过程、数据与取舍完整记下来，方便下次少走弯路。
2026-09-25510林深
文章 · 踩坑记录
单测覆盖率的取舍，以及我们最终采用的方案
记录一次从 0 到 1 的尝试，失败的版本也一并保留。
2026-09-26371林深
文章 · 设计系统
可维护的设计令牌体系，以及我们最终采用的方案
从原理讲到落地，尽量把每个决策的依据说明白。
2026-09-26228林深
文章 · 缓存
CSS 布局里容易出错的细节，以及我们最终采用的方案
把踩过的坑按顺序写清楚，附上最终采用的方案与代价。
2026-09-274.3K林深
文章 · 测试
React 的渲染与提交阶段，以及我们最终采用的方案
复盘一次真实场景，指标、工具与最后的选择都写在里面。
2026-09-274.2K林深
文章 · 架构
用三层缓存把接口 P95 拉回 200ms，以及我们最终采用的方案
先给结论，再拆过程：哪些做法有效，哪些只是看起来有效。
2026-09-284K林深
文章 · 构建工具
一次线上白屏的排查全过程，以及我们最终采用的方案
这篇整理了我们在这件事上的实践，包含可以直接复用的清单。
2026-09-283.9K林深
文章 · 性能优化
前端监控里最容易被忽略的指标，以及我们最终采用的方案
从问题出现到方案落地，记录每一步判断与最终结果。
2026-09-293.7K林深
文章 · 前端工程
把构建时间从 90 秒压到 12 秒，以及我们最终采用的方案
把这次改造的过程、数据与取舍完整记下来，方便下次少走弯路。
2026-09-293.6K林深
文章 · 工程化
图片加载与 LCP 的关系：一次完整复盘
记录一次从 0 到 1 的尝试，失败的版本也一并保留。
2026-09-303.5K林深
文章 · 脚本
用 ESLint 固化团队约定：一次完整复盘
从原理讲到落地，尽量把每个决策的依据说明白。
2026-09-303.3K林深
文章 · 调试工具
前端工程化的边界：一次完整复盘
把踩过的坑按顺序写清楚，附上最终采用的方案与代价。
2026-10-013.2K林深
文章 · 安全
构建缓存命中的前提：一次完整复盘
复盘一次真实场景，指标、工具与最后的选择都写在里面。
2026-10-013K林深
文章 · 命令行
用契约测试保护接口变更：一次完整复盘
先给结论，再拆过程：哪些做法有效，哪些只是看起来有效。
2026-10-022.9K林深
文章 · 效率工具
设计稿到组件的还原度：一次完整复盘
这篇整理了我们在这件事上的实践，包含可以直接复用的清单。
2026-10-022.8K林深
文章 · 踩坑记录
让代码评审更快发生：一次完整复盘
从问题出现到方案落地，记录每一步判断与最终结果。
2026-10-032.6K林深
文章 · 设计系统
一次内存泄漏的定位：一次完整复盘
把这次改造的过程、数据与取舍完整记下来，方便下次少走弯路。
2026-10-032.5K林深
文章 · 缓存
用状态机管理复杂表单：一次完整复盘
记录一次从 0 到 1 的尝试，失败的版本也一并保留。
2026-10-042.4K林深
文章 · 测试
首屏优化的优先级排序：一次完整复盘
从原理讲到落地，尽量把每个决策的依据说明白。
2026-10-042.2K林深
文章 · 架构
把 CI 从 20 分钟压到 6 分钟：一次完整复盘
把踩过的坑按顺序写清楚，附上最终采用的方案与代价。
2026-10-052.1K林深
文章 · 构建工具
前端日志的采样策略：一次完整复盘
复盘一次真实场景，指标、工具与最后的选择都写在里面。
2026-10-051.9K林深
文章 · 性能优化
深色模式的对比度修正：一次完整复盘
先给结论，再拆过程：哪些做法有效，哪些只是看起来有效。
2026-10-061.8K林深
文章 · 前端工程
组件库从 0 到 1：一次完整复盘
这篇整理了我们在这件事上的实践，包含可以直接复用的清单。
2026-10-061.7K林深
文章 · 工程化
用增量构建替代全量构建：一次完整复盘
从问题出现到方案落地，记录每一步判断与最终结果。
2026-10-071.5K林深
文章 · 脚本
移动端适配的三种方案：一次完整复盘
把这次改造的过程、数据与取舍完整记下来，方便下次少走弯路。
2026-10-071.4K林深
文章 · 调试工具
接口错误处理的收敛：一次完整复盘
记录一次从 0 到 1 的尝试，失败的版本也一并保留。
2026-10-081.3K林深
文章 · 安全
一次数据库索引失效的复盘：一次完整复盘
从原理讲到落地，尽量把每个决策的依据说明白。
2026-10-081.1K林深
文章 · 命令行
用 Web Worker 解决主线程卡顿：一次完整复盘
把踩过的坑按顺序写清楚，附上最终采用的方案与代价。
2026-10-09990林深
文章 · 效率工具
大型仓库的分包与按需加载：一次完整复盘
复盘一次真实场景，指标、工具与最后的选择都写在里面。
2026-10-09853林深
文章 · 踩坑记录
单测覆盖率的取舍：一次完整复盘
先给结论，再拆过程：哪些做法有效，哪些只是看起来有效。
2026-10-10716林深
文章 · 设计系统
可维护的设计令牌体系：一次完整复盘
这篇整理了我们在这件事上的实践，包含可以直接复用的清单。
2026-10-10579林深
文章 · 缓存
CSS 布局里容易出错的细节：一次完整复盘
从问题出现到方案落地，记录每一步判断与最终结果。
2026-10-11442林深
文章 · 测试
React 的渲染与提交阶段：一次完整复盘
把这次改造的过程、数据与取舍完整记下来，方便下次少走弯路。
2026-10-11305林深
文章 · 架构
用三层缓存把接口 P95 拉回 200ms：一次完整复盘
记录一次从 0 到 1 的尝试，失败的版本也一并保留。
2026-10-12168林深
文章 · 构建工具
一次线上白屏的排查全过程：一次完整复盘
从原理讲到落地，尽量把每个决策的依据说明白。
2026-10-124.2K林深
文章 · 性能优化
前端监控里最容易被忽略的指标：一次完整复盘
把踩过的坑按顺序写清楚，附上最终采用的方案与代价。
2026-10-134.1K林深
文章 · 前端工程
把构建时间从 90 秒压到 12 秒：一次完整复盘
复盘一次真实场景，指标、工具与最后的选择都写在里面。
2026-10-134K林深
文章 · 工程化
图片加载与 LCP 的关系
先给结论，再拆过程：哪些做法有效，哪些只是看起来有效。
2026-10-143.8K林深
文章 · 脚本
用 ESLint 固化团队约定
这篇整理了我们在这件事上的实践，包含可以直接复用的清单。
2026-10-143.7K林深
文章 · 调试工具
前端工程化的边界
从问题出现到方案落地，记录每一步判断与最终结果。
2026-10-153.5K林深
文章 · 安全
构建缓存命中的前提
把这次改造的过程、数据与取舍完整记下来，方便下次少走弯路。
2026-10-153.4K林深
文章 · 命令行
用契约测试保护接口变更
记录一次从 0 到 1 的尝试，失败的版本也一并保留。
2026-10-163.3K林深
文章 · 效率工具
设计稿到组件的还原度
从原理讲到落地，尽量把每个决策的依据说明白。
2026-10-163.1K林深
文章 · 踩坑记录
让代码评审更快发生
把踩过的坑按顺序写清楚，附上最终采用的方案与代价。
2026-10-173K林深
文章 · 设计系统
一次内存泄漏的定位
复盘一次真实场景，指标、工具与最后的选择都写在里面。
2026-10-172.9K林深
文章 · 缓存
用状态机管理复杂表单
先给结论，再拆过程：哪些做法有效，哪些只是看起来有效。
2026-10-182.7K林深
文章 · 测试
首屏优化的优先级排序
这篇整理了我们在这件事上的实践，包含可以直接复用的清单。
2026-10-182.6K林深
文章 · 架构
把 CI 从 20 分钟压到 6 分钟
从问题出现到方案落地，记录每一步判断与最终结果。
2026-10-192.5K林深
文章 · 构建工具
前端日志的采样策略
把这次改造的过程、数据与取舍完整记下来，方便下次少走弯路。
2026-10-192.3K林深
文章 · 性能优化
深色模式的对比度修正
记录一次从 0 到 1 的尝试，失败的版本也一并保留。
2026-10-202.2K林深
文章 · 前端工程
组件库从 0 到 1
从原理讲到落地，尽量把每个决策的依据说明白。
2026-10-202K林深
文章 · 工程化
用增量构建替代全量构建
把踩过的坑按顺序写清楚，附上最终采用的方案与代价。
2026-10-211.9K林深
文章 · 脚本
移动端适配的三种方案
复盘一次真实场景，指标、工具与最后的选择都写在里面。
2026-10-211.8K林深
文章 · 调试工具
接口错误处理的收敛
先给结论，再拆过程：哪些做法有效，哪些只是看起来有效。
2026-10-221.6K林深
文章 · 安全
一次数据库索引失效的复盘
这篇整理了我们在这件事上的实践，包含可以直接复用的清单。
2026-10-221.5K林深
文章 · 命令行
用 Web Worker 解决主线程卡顿
从问题出现到方案落地，记录每一步判断与最终结果。
2026-10-231.4K林深
文章 · 效率工具
大型仓库的分包与按需加载
把这次改造的过程、数据与取舍完整记下来，方便下次少走弯路。
2026-10-231.2K林深
文章 · 踩坑记录
单测覆盖率的取舍
记录一次从 0 到 1 的尝试，失败的版本也一并保留。
2026-10-241.1K林深
文章 · 设计系统
可维护的设计令牌体系
从原理讲到落地，尽量把每个决策的依据说明白。
2026-10-24943林深
文章 · 缓存
CSS 布局里容易出错的细节
把踩过的坑按顺序写清楚，附上最终采用的方案与代价。
2026-10-25806林深
文章 · 测试
React 的渲染与提交阶段
复盘一次真实场景，指标、工具与最后的选择都写在里面。
2026-10-25669林深
文章 · 架构
用三层缓存把接口 P95 拉回 200ms
先给结论，再拆过程：哪些做法有效，哪些只是看起来有效。
2026-10-26538林深
文章 · 构建工具
一次线上白屏的排查全过程
这篇整理了我们在这件事上的实践，包含可以直接复用的清单。
2026-10-26395林深
文章 · 性能优化
前端监控里最容易被忽略的指标
从问题出现到方案落地，记录每一步判断与最终结果。
2026-10-27260林深
文章 · 前端工程
把构建时间从 90 秒压到 12 秒
把这次改造的过程、数据与取舍完整记下来，方便下次少走弯路。
2026-10-27130林深
文章 · 工程化
阿斯顿
阿斯顿
2026-10-2687123
文章 · 工程化
测试文章内容
你好呀我是简介
2026-10-269123
文章 · 工程化
测试文章
测试速度
2026-10-2451123123
文章 · 工程化
测试1
123123123
2026-10-2252123
笔记 · 前端工程
测试
测试测试
2026-10-2254123
文章 · 性能优化
用 unicode-range 给中文可变字体做按需加载
中文字库动辄十几兆，整包引入会拖垮首屏。把思源黑体切成上百个分片，按页面实际用字加载。
2026-10-121.3K许原
文章 · 工程化
把 CI 从 12 分钟压到 4 分钟
不改业务代码，只调流水线：并行分片、缓存命中率、产物裁剪三件事。
2026-10-08989周迟
文章 · 前端工程
一套设计令牌，同时喂给 Web 与小程序
把色彩、排版、圆角收敛成单一数据源，用脚本产出两边样式。
2026-10-03762陈默
工具 · 效率工具
从零搭一个只属于自己的书签检索系统
不依赖任何 SaaS，用一个静态站点加本地索引，把三年的收藏变成私人资料库。
2026-09-281.1K林深
笔记 · 踩坑记录
依赖升级踩坑记：Vite 与 Node 版本的那点事
一次看似无害的主版本升级，让构建在本地和 CI 上给出了完全不同的结果。
2026-09-221.6K周迟
文章 · 工程化
Monorepo 里那些没人告诉你的缓存陷阱
任务图配错一个 dependsOn，缓存就会静默失效，而构建看起来一切正常。
2026-09-16925周迟
文章 · 工程化
给团队写的一份代码评审清单
把「凭感觉评审」变成「按清单评审」：23 条可勾选的问题。
2026-09-101K陈默
文章 · 性能优化
自托管字体到底值不值得
对比 CDN 与自托管在首屏、隐私、离线三个维度的真实表现。
2026-09-04673许原
视频 · 工程化
我用一周时间重写了构建脚本
把这段过程完整录了下来：为什么重写、怎么拆分、踩了哪些坑。
2026-08-302.4K周迟
周刊 · 周刊
2026 年 10 月周刊：缓存、字体与构建
本月值得一读的 9 篇外文、3 个工具，以及我在做的东西。
2026-08-251.9K林深
工具 · 效率工具
把终端变成第二大脑：我的 CLI 工具箱
12 个自己写的命令行小工具，覆盖检索、批处理与日常琐事。
2026-08-181.5K林深
笔记 · 前端工程
中文字体排版的 12 个细节
字重、行高、字距、标点挤压——那些让中文看起来舒服的小事。
2026-08-112.1K陈默
文章 · 性能优化
把字体分包做成一条流水线
从扫描源码用字到产出分片与 CSS 全部交给脚本，新增页面不再需要手动处理。
2026-10-15361许原
工具 · 效率工具
本地优先的笔记到底怎么落地
数据留在本地、冲突靠合并解决，把「同步」从必选项变成可选项。
2026-09-30726林深
文章 · 前端工程
栅格排布：让信息密度翻倍而不显乱
把 12 列栅格换成 16 列，配合间距分级，同样面积能多放三成内容。
2026-09-19595陈默
文章 · 工程化
CI 缓存预热：把冷启动摊到夜里
用定时任务提前把依赖装好，早上第一条流水线不用再等三分钟。
2026-09-12480周迟
视频 · 视频
把构建优化过程录成视频
从定位瓶颈到改完上线，全程无剪辑，连带失败的尝试一起放出来。
2026-09-051.1K周迟
文章 · 前端工程
用容器查询重做组件布局
媒体查询看的是视口，组件其实更该看自己有多宽。把断点从页面搬进组件里。
2026-09-01744陈默
文章 · 架构
本地优先的同步方案怎么选
CRDT、操作日志还是简单的版本号？三种方案在冲突处理与实现成本上差得很远。
2026-08-271.4K林深
文章 · 构建工具
自己写一个 Vite 插件要懂什么
从 resolveId 到 transform，把插件钩子的执行顺序讲清楚，再动手就不容易踩坑。
2026-08-23919周迟
文章 · 性能优化
图片懒加载之外，还该做解码优化
图片下载完不等于能立刻画出来，解码、尺寸占位与优先级三件事决定体感快慢。
2026-08-19657许原
文章 · 工程化
单仓多包的工具链怎么收敛
包一多，脚本、依赖版本和发布流程就会各走各的。用三份配置把它们拉回一条线。
2026-08-151.1K周迟
笔记 · 设计系统
深色模式不是把颜色反过来
纯反色看久了眼睛累。对比度要降、阴影要换、强调色得单独调一版，这里记下取舍。
2026-08-11874陈默
笔记 · 排版
中文字体回退栈的实战排序
苹方、微软雅黑、思源黑体怎么排？顺序不同，同一份 CSS 在两端能差出半个字宽。
2026-08-07498许原
文章 · 前端工程
状态管理可以有多轻
一个 ref 加一个 computed 能解决多少事？先算清共享范围，再决定要不要引入库。
2026-08-031K林深
文章 · 缓存
日志结构缓存的读写代价
顺序写换来的是读取时的多次查找，用真实压测数据看这笔账到底划不划算。
2026-07-30589林深
文章 · 前端工程
一次可访问性自查的清单
不用等审计工具，键盘走一遍、缩放到 200% 看一眼，多数问题当场就能发现。
2026-07-26831陈默
工具 · 工程化
构建缓存为什么老是打不中
把缓存键打出来对比一遍就明白了：时间戳、绝对路径、环境变量都是常见的搅局者。
2026-07-22527周迟
文章 · 效率工具
把终端调成顺手的形状
提示符、补全、历史搜索三处改完，命令行才算真正开始省时间。
2026-07-181.2K许原

HMR 不是免费的：开发服务器性能账

专题

构建提速

中文字体

设计令牌

缓存策略

代码评审

私有工具链

精选内容

做一个小而稳的内容站：从选题池、写作节奏到发布流程，我们把能省掉的环节都省掉了，只留下真正影响读者体验的那几件事

一次持续了三个季度的性能优化复盘：从首屏指标全线告警到稳定达标的完整过程，包括我们试过的所有错误方向、被证伪的假设、最后真正起作用的少数几件事以及为此付出的取舍

最新

阿斯顿阿斯顿

测试标题

用增量构建替代全量构建，以及我们最终采用的方案

移动端适配的三种方案，以及我们最终采用的方案

接口错误处理的收敛，以及我们最终采用的方案

一次数据库索引失效的复盘，以及我们最终采用的方案

用 Web Worker 解决主线程卡顿，以及我们最终采用的方案

大型仓库的分包与按需加载，以及我们最终采用的方案

单测覆盖率的取舍，以及我们最终采用的方案

可维护的设计令牌体系，以及我们最终采用的方案

CSS 布局里容易出错的细节，以及我们最终采用的方案

React 的渲染与提交阶段，以及我们最终采用的方案

用三层缓存把接口 P95 拉回 200ms，以及我们最终采用的方案

一次线上白屏的排查全过程，以及我们最终采用的方案

前端监控里最容易被忽略的指标，以及我们最终采用的方案

把构建时间从 90 秒压到 12 秒，以及我们最终采用的方案

图片加载与 LCP 的关系：一次完整复盘

用 ESLint 固化团队约定：一次完整复盘

前端工程化的边界：一次完整复盘

构建缓存命中的前提：一次完整复盘

用契约测试保护接口变更：一次完整复盘

设计稿到组件的还原度：一次完整复盘

让代码评审更快发生：一次完整复盘

一次内存泄漏的定位：一次完整复盘

用状态机管理复杂表单：一次完整复盘

首屏优化的优先级排序：一次完整复盘

把 CI 从 20 分钟压到 6 分钟：一次完整复盘

前端日志的采样策略：一次完整复盘

深色模式的对比度修正：一次完整复盘

组件库从 0 到 1：一次完整复盘

用增量构建替代全量构建：一次完整复盘

移动端适配的三种方案：一次完整复盘

接口错误处理的收敛：一次完整复盘

一次数据库索引失效的复盘：一次完整复盘

用 Web Worker 解决主线程卡顿：一次完整复盘

大型仓库的分包与按需加载：一次完整复盘

单测覆盖率的取舍：一次完整复盘

可维护的设计令牌体系：一次完整复盘

CSS 布局里容易出错的细节：一次完整复盘

React 的渲染与提交阶段：一次完整复盘

用三层缓存把接口 P95 拉回 200ms：一次完整复盘

一次线上白屏的排查全过程：一次完整复盘

前端监控里最容易被忽略的指标：一次完整复盘

把构建时间从 90 秒压到 12 秒：一次完整复盘

图片加载与 LCP 的关系

用 ESLint 固化团队约定

前端工程化的边界

构建缓存命中的前提

用契约测试保护接口变更

设计稿到组件的还原度

让代码评审更快发生

一次内存泄漏的定位

用状态机管理复杂表单

首屏优化的优先级排序

把 CI 从 20 分钟压到 6 分钟

前端日志的采样策略

深色模式的对比度修正

组件库从 0 到 1

用增量构建替代全量构建

移动端适配的三种方案

接口错误处理的收敛

一次数据库索引失效的复盘

用 Web Worker 解决主线程卡顿

大型仓库的分包与按需加载

单测覆盖率的取舍

可维护的设计令牌体系

CSS 布局里容易出错的细节

React 的渲染与提交阶段