前端工程化

三十而立洋

深入浅出 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 取数再返

ESLint 10 把 .eslintrc 删了：flat config 到底怎么配，我帮你踩完了你升级了 ESLint，兴冲冲地重跑一遍 lint，结果屏幕上出现的不是熟悉的 warning 列表，而是一句陌生的报错：

彻底搞懂 'use client'：Next.js 组件根本不是"只在浏览器渲染"一个 Todo 项目，让你看清 Server Component 和 Client Component 之间那条被大多数人误解的边界。

彻底搞懂 App Router 约定式路由：文件放对位置，路由就自动生成了一个 next-demo 项目，串起 page.tsx、layout.tsx、route.ts、'use client'——App Router 的"约定大于配置"一次讲清。

Harness Engineering：让 Agent 在受控边界内运行AI Agent 工程化系列第五篇。本文以 Cherry Studio 的 Tool Registry、Claude Code settings、审批、会话宿主与可观测性为例，说明 Harness Engineering 如何把“模型能做什么”变成“产品允许它在什么边界内做什么”。文中的伪代码用于解释设计逻辑，不是可直接复制的生产代码。