前端工程化

断点不该认识设备：组件布局的容器状态治理响应式布局长期把“屏幕有多大”当作主要输入：@media 读取视口宽度，页面在某个断点切换列数、导航形态和卡片排版。这种方式在页面结构简单时足够有效；但当同一个卡片可能出现在主栏、侧栏、弹窗、分栏工作台或可拖拽面板中时，视口宽度就不再能准确描述它的真实处境。

让故障自己找到主人：前端错误的归并、反解与分派系统线上出现一条 TypeError，并不等于团队已经知道了问题：它可能来自哪个异步 chunk，影响了哪一批灰度用户，是否与刚刚发布的版本有关，应该交给订单域还是基础组件团队，修复后是否真的消失。

别把 Claude Code 当聊天框：一套「确定性工程」落地手册我用 Claude Code 做生产项目一年多，走过一段典型弯路：一开始以为瓶颈在模型，不断换更强的模型，该出的 bug 还是出。后来我把注意力从"让模型更聪明"转到"让约束更硬"，提升比换三次模型加起来都明显。

用 Knip 清理 AI Coding 留下的冗余代码最近，我拿 Knip 跑了两个现有项目，清理掉了不少冗余代码和未使用文件。清完以后，我又让 agent 翻 Git 记录，看看这些东西是怎么留下来的。

三十而立洋

深入浅出 Nginx：从核心原理到实战指南Nginx（发音同 "engine x"）是一个高性能的 HTTP 和反向代理 Web 服务器，由俄罗斯程序员 Igor Sysoev 开发，2004 年首次公开发布。凭借高并发、低内存占用、高扩展性与极强的稳定性，它已成为全球互联网架构的核心基础设施。

三十而立洋

深入理解 Monorepo：子包安装依赖在 pnpm workspace 中，正确地为每个子包安装依赖是 Monorepo 工程化的基础。本文详细介绍 4 种安装方式、依赖类型区分、验证方法和最佳实践。

报错之后，谁来证明它属于这次发布？前端错误治理的证据链设计很多团队的前端错误监控，停留在一个看似合理、实际却难以行动的状态：平台每天收到成千上万条 TypeError、资源加载失败和接口异常；研发知道“线上有问题”，却很难回答几个真正决定处置效率的问题：

pnpm 12 换上了 Rust 内核，我拿项目实测了一轮构建速度昨天 InfoQ 发了条消息：pnpm 12 用 Rust 重写了核心。今天一上班我先去 npm 上拉了一遍 dist-tags，latest 已经是 12.3.4 了——距离发布才一天，官方就把 latest 标签转正了，说明这次升级官方自己心里是有底的。顺手我又把手里那个测试用的小 monorepo 拿出来，实测了一轮 pnpm 12 的安装速度和 Vite 7 → 8 的构建变化。一轮测下来我的感受是：Rust 化是真的，速度提升也是真的，但小项目上的体感远没有官方 benchmark 里那么夸张

Webpack 快速上手：前端工程化、打包原理、从零搭建基础项目现代前端项目早已不是"一个 HTML 引几个 JS 文件"那么简单：Webpack 就是把这些能力整合起来的"模块打包器"（module bundler）：从入口文件出发，递归解析所有依赖，最终打包成浏览器可直接运行的静态资源。

三十而立洋

深入理解 npm：从核心机制到常用命令全解析一篇写给前端/Node 开发者的 npm 进阶博客。读完你将明白 npm 到底是什么、它如何工作、常用命令背后的原理，以及如何安全高效地使用它。

把响应式做成可验证的状态切换：Container Queries 的组件级重构方法同一张项目卡片放在内容主栏、侧边栏和弹窗里，常常会遇到一个反直觉的问题：页面视口已经足够宽，卡片却仍然拥挤。

一个管「引」，一个管「抄」：Submodule 和 Subtree 到底差在哪上篇写了单仓和 Submodule：自己团队的代码往一个仓库里收，要挂别人维护的独立仓库才用 Submodule。发完就有人来问我：那 Git Subtree 呢？

换模型之后，Chatbot 为什么要自己做 compact？笔者所在小团队维护着星悟，是司内用的一款 chatbot。用户拿它查资料、追问、把一轮对话拉得很长。开头那段日子，模型基本只有 GPT。长了就在输入框打 /compact，服务端把当前消息转成 Responses 的 input，再调用模型网关的 POST /v1/responses/compact。使用官网API进行上下文的压缩。

Achieve前端实验室

SSG 预渲染工具站 SEO 优化实践：从零收录到全面修复的 7 个问题SSG（Static Site Generation，静态站点生成）是当前前端工程化中常见的预渲染方案。与 CSR（客户端渲染）不同，SSG 在构建时为每个路由生成独立的 HTML 文件，搜索引擎无需执行 JavaScript 即可获取完整内容。

Vite 前端发布后「点击菜单没反应」？旧版本资源 404 的完整排查与修复实录关键词：Vite 构建缓存 · 路由懒加载 · nginx 缓存策略 · version.json 版本探测 · bfcache

🤔 v-mortal 是什么？！我只知道 v-model 啊！昨天，我正在 review 代码，突然看到几个 v-mortal 出现在 Diff 中。嗯？很陌生啊，完全没见过，搜索引擎没有结果，AI 也说不知道，问我是不是拼写错误，可能是 v-model ？

npm / yarn / pnpm：别再靠感觉选了新项目用 pnpm。Monorepo 用 pnpm workspaces。存量 yarn classic 项目不必强迁。如果你还在用 npm 跑 CI，你的构建时间和磁盘账单都有改善空间。

开源项目第195期：OpenTelemetry Demo（Astronomy Shop）— 官方出品的分布式系统可观测性实战教材"可观测性不是工具，是能力。要学会用 Traces/Metrics/Logs 诊断分布式系统，光读文档不够，得有一个真实的系统可以折腾。"

一位正在转型AI全栈的前端工程师

从 0 到 1 搭建生产级 RAG 系统：切片、召回与重排序调优实录作为一名有十年经验的前端开发者，我在转向全栈工程师的过程中，决定亲手搭建一个生产级 RAG（Retrieval-Augmented Generation）系统。目标是从一本 PDF 书籍（《好好学习》）中自动回答相关问题，例如“成甲老师从哪一年开始接触知识管理？”、“什么是临界知识？”等。

Next.js 博客左侧笔记列表是怎么从 Redis 渲染出来的？从组件、children 到动态路由一次讲清我第一次打开这个 next-blog 项目，最想知道的不是"React 是什么"，而是左侧那一列笔记到底怎么从 Redis 跑到屏幕上。这篇文章就沿这条线，把组件渲染、children、数据流、Next.js 的 layout 和动态路由串起来。先交个底：它是 npx create-next-app 起的 Next.js 全栈脚手架（next 16.3.1），用 App Router，页面默认是 React Server Component（RSC）——能在服务端 async 里直接 await 取数再返