前端工程化专题：从 Vite 到 WebAssembly 的全栈实践 on PlumePHP

Core Web Vitals 实战：LCP、FID、CLS 的测量与优化

Thu, 10 Sep 2026 10:00:00 +0800

引言：为什么 Core Web Vitals 至关重要

自 2021 年 Google 将页面体验（Page Experience）正式纳入搜索排名算法以来，Core Web Vitals（核心网页指标） 已成为衡量网站质量和 SEO 表现的核心维度之一。与传统性能指标（如 DOMContentLoaded、load 时间）不同，CWV 更加聚焦于真实用户体验，直接反映了访客在浏览页面时的感知速度、交互响应和视觉稳定性。

esbuild 原理：为什么它比传统打包器快 10-100 倍

Thu, 10 Sep 2026 10:00:00 +0800

在 2020 年，Evan Wallace 发布了 esbuild，一款用 Go 编写的 JavaScript 打包器。当时它宣告了一个惊人的事实：把 10 秒级的大型项目构建压缩到 0.1 秒以内。这个速度提升不是渐进优化，而是数量级的碾压。五年后的今天，esbuild 已经成为 Vite、SvelteKit、Remix 等主流框架的底层引擎。本文将深入拆解它的内部原理，解释为什么 esbuild 能跑得这么快，以及它的取舍与边界。

Monorepo 工程化选型：pnpm workspace、turborepo 与 nx 深度对比

Thu, 10 Sep 2026 10:00:00 +0800

随着前端项目复杂度持续攀升，越来越多的团队开始将多个相关联的包或应用收敛到同一个代码仓库中管理，这种模式被称为 Monorepo。与传统的 Multirepo（每个项目独立仓库）相比，Monorepo 在代码共享、跨项目重构、依赖一致性以及团队协作方面都有显著优势。然而，Monorepo 本身也带来了构建性能、任务编排和工具链复杂度等新的挑战。

PWA 渐进式 Web 应用：Service Worker 与离线体验

Thu, 10 Sep 2026 10:00:00 +0800

PWA（Progressive Web App，渐进式 Web 应用）是一种利用现代 Web 技术构建的应用形态，它兼具网页的可达性与原生应用的交互体验。通过 Service Worker、Cache Storage 和 Web App Manifest 三大核心技术，PWA 能够在弱网甚至无网环境下保持可用，并支持添加至主屏幕、后台同步和推送通知等功能。

React 并发模式：Fiber 架构与 Suspense 原理

Thu, 10 Sep 2026 10:00:00 +0800

引言

React 18 的并发模式（Concurrent Mode）不是一项单一功能，而是一套底层重构后的调度体系。它的核心目标只有一个：在保证 UI 正确性的前提下，让高优先级更新能够中断低优先级渲染，从而避免组件树过于庞大时出现的卡顿。本文从 Fiber 架构出发，逐步深入 Work Loop、Lane 优先级模型、Suspense 边界以及双缓冲机制，帮助读者理解 React 并发渲染的完整链路。

Svelte 编译原理：没有虚拟 DOM 的框架如何工作

Thu, 10 Sep 2026 10:00:00 +0800

主流前端框架 React 和 Vue 都依赖虚拟 DOM（Virtual DOM）作为其渲染和更新机制的核心抽象。然而，Svelte 选择了一条截然不同的道路：它在编译阶段而非运行时将组件代码转换为高效的指令式 JavaScript，从而彻底摒弃了虚拟 DOM。本文将深入剖析 Svelte 编译器的内部工作机制，探索它如何在构建时完成框架运行时的大部分工作。

TypeScript 性能优化：避免类型检查拖垮大型项目

Thu, 10 Sep 2026 10:00:00 +0800

TypeScript 在大型项目中的类型检查性能问题，往往不会在一夜之间爆发，而是随着代码量累积逐渐侵蚀开发体验。从最初的秒级编译，到后来执行 tsc 需要泡一杯咖啡才能回来，背后的元凶通常不是单一因素，而是类型复杂度爆炸、声明文件膨胀和项目结构不合理共同作用的结果。本文将从诊断到治理，系统性地拆解如何把一个 5 分钟编译的项目优化到 30 秒以内。

TypeScript 高级类型体操：从映射类型到模板字面量

Thu, 10 Sep 2026 10:00:00 +0800

TypeScript 的类型系统远不止于给变量加上 :string 或 :number。当你把类型本身当作一门函数式编程语言来使用时，便进入了类型体操的领域。本文将从实际需求出发，系统梳理 TypeScript 类型层面的高级工具，帮助你在不引入运行时开销的前提下，把类型安全推到极限。

Vite 深度解析：从预构建到 HMR 的完整链路

Thu, 10 Sep 2026 10:00:00 +0800

Vite 问世以来彻底改变了前端开发体验。这篇文章将深入其内部实现，拆解从依赖预构建到热更新、再到生产打包的完整链路。

一、为什么 Vite 能解决 webpack 的慢启动问题

传统 webpack 在 dev 模式下会执行完整的打包流程：解析入口、递归依赖图、应用 loader、构建 chunk。随着项目膨胀，冷启动时间往往超过数十秒。

Vue3 响应式原理：从 Object.defineProperty 到 Proxy

Thu, 10 Sep 2026 10:00:00 +0800

Vue 的响应式系统是其最核心的设计之一，也是它区别于传统模板引擎的根本特征。Vue 2 使用 Object.defineProperty 实现响应式，而 Vue 3 全面拥抱 Proxy，不仅解决了诸多历史痛点，还带来了更灵活的扩展能力。本文从源码级角度深入解析 Vue 3 响应式系统的完整链路。

WebAssembly 实战：从 C++ 到浏览器的高性能计算

Thu, 10 Sep 2026 10:00:00 +0800

WebAssembly（简称 WASM）自 2017 年诞生以来，已经从浏览器端的高性能计算扩展到了服务器、边缘计算乃至区块链等多个领域。本文将从实战角度出发，深入讲解 WASM 的核心机制、构建流程、JavaScript 互操作以及真实落地场景，帮助你掌握在浏览器中释放原生级性能的关键技术。

WebRTC 入门：从信令到点对点音视频传输

Thu, 10 Sep 2026 10:00:00 +0800

WebRTC 是什么

WebRTC（Web Real-Time Communication）是一组开源的浏览器 API 与协议标准，允许在不需要任何插件的情况下，直接在浏览器之间建立点对点（Peer-to-Peer）的实时音视频通信和数据传输。2011年由 Google 开源，现已成为 W3C 推荐标准，被 Chrome、Firefox、Safari、Edge 等主流浏览器广泛支持。

从 Webpack 到 Vite：迁移策略与原理对比

Thu, 10 Sep 2026 10:00:00 +0800

构建工具的选型直接决定了前端开发的效率上限。Webpack 在过去十年里统治了打包生态，而 Vite 凭借原生 ESM 的方案彻底改写了开发体验。如果你正考虑在 Hugo 站点或前端项目中进行迁移，这篇文章将帮助你理解两者的本质差异、迁移路径以及潜在的坑。

前端 Bundle 分析与优化：从体积到执行时长的全链路

Thu, 10 Sep 2026 10:00:00 +0800

现代前端应用的性能瓶颈往往不在网络延迟，而在于 JavaScript Bundle 本身的体积与执行效率。一个未经优化的 Bundle 可能让首屏加载时间从 1 秒暴增至 5 秒以上。本文从分析工具入手，覆盖代码分割、Tree Shaking、动态加载、库优化、运行时性能与性能预算，构建一套完整的 Bundle 优化工作流。

前端 CI/CD 最佳实践：从代码提交到自动发布

Thu, 10 Sep 2026 10:00:00 +0800

前端项目的交付节奏越来越快，从每天一次发布到每天数十次发布，已经不是什么新鲜事。在这样的高频率迭代下，如果没有一套可靠的 CI/CD（持续集成 / 持续交付）流程，团队很容易陷入「提交 → 手动构建 → 人工测试 → 手抖上线 → 紧急回滚」的恶性循环。这篇文章将从代码提交到自动发布，系统梳理前端 CI/CD 的核心环节与最佳实践。

Better Auth 完整接入指南：基于 React、Hono、Cloudflare Workers 与 D1 构建认证系统

Tue, 14 Jul 2026 18:00:00 +0800

Better Auth 完整接入指南

1. 接入目标

本指南最终实现以下能力：

邮箱和密码注册。
邮箱和密码登录。
Cookie Session。
邮箱验证。
忘记密码和重置密码。
Google、GitHub OAuth。
Cloudflare Turnstile 防滥用。
Hono 服务端鉴权中间件。
React 客户端 Session 状态。
登录设备和 Session 撤销。
D1 数据持久化。
Drizzle Schema 和 Migration。
Cloudflare Workers 部署。
可继续扩展 Organization、Admin、API Key、Passkey 和 2FA。

推荐拓扑：