前端 CI/CD 最佳实践：从代码提交到自动发布
前端项目的交付节奏越来越快，从每天一次发布到每天数十次发布，已经不是什么新鲜事。在这样的高频率迭代下，如果没有一套可靠的 CI/CD（持续集成 / 持续交付）流程，团队很容易陷入「提交 → 手动构建 → 人工测试 → 手抖上线 → 紧急回滚」的恶性循环。
category
Frontend
共 102 篇文章。
前端 Bundle 分析与优化：从体积到执行时长的全链路
现代前端应用的性能瓶颈往往不在网络延迟，而在于 JavaScript Bundle 本身的体积与执行效率。一个未经优化的 Bundle 可能让首屏加载时间从 1 秒暴增至 5 秒以上。
从 Webpack 到 Vite：迁移策略与原理对比
构建工具的选型直接决定了前端开发的效率上限。Webpack 在过去十年里统治了打包生态，而 Vite 凭借原生 ESM 的方案彻底改写了开发体验。如果你正考虑在 Hugo 站点或前端项目中进行迁移，这篇文章将帮助你理解两者的本质差异、迁移路径以及潜在的坑。
WebRTC 入门：从信令到点对点音视频传输
WebRTC 是什么 WebRTC（Web Real-Time Communication）是一组开源的浏览器 API 与协议标准，允许在不需要任何插件的情况下，直接在浏览器之间建立点对点（Peer-to-Peer）的实时音视频通信和数据传输。
WebAssembly 实战：从 C++ 到浏览器的高性能计算
WebAssembly（简称 WASM）自 2017 年诞生以来，已经从浏览器端的高性能计算扩展到了服务器、边缘计算乃至区块链等多个领域。本文将从实战角度出发，深入讲解 WASM 的核心机制、构建流程、JavaScript 互操作以及真实落地场景，帮助你掌握在浏览器中释放原生级性能的关键技术。
Vue3 响应式原理：从 Object.defineProperty 到 Proxy
Vue 的响应式系统是其最核心的设计之一，也是它区别于传统模板引擎的根本特征。Vue 2 使用 实现响应式，而 Vue 3 全面拥抱 ，不仅解决了诸多历史痛点，还带来了更灵活的扩展能力。本文从源码级角度深入解析 Vue 3 响应式系统的完整链路。
Vite 深度解析：从预构建到 HMR 的完整链路
Vite 问世以来彻底改变了前端开发体验。这篇文章将深入其内部实现，拆解从依赖预构建到热更新、再到生产打包的完整链路。一、为什么 Vite 能解决 webpack 的慢启动问题 传统 webpack 在 dev 模式下会执行完整的打包流程：解析入口、递归依赖图、应用 loader、构建 chunk。
TypeScript 高级类型体操：从映射类型到模板字面量
TypeScript 的类型系统远不止于给变量加上 或 。当你把类型本身当作一门函数式编程语言来使用时，便进入了类型体操的领域。本文将从实际需求出发，系统梳理 TypeScript 类型层面的高级工具，帮助你在不引入运行时开销的前提下，把类型安全推到极限。
TypeScript 性能优化：避免类型检查拖垮大型项目
TypeScript 在大型项目中的类型检查性能问题，往往不会在一夜之间爆发，而是随着代码量累积逐渐侵蚀开发体验。从最初的秒级编译，到后来执行 需要泡一杯咖啡才能回来，背后的元凶通常不是单一因素，而是类型复杂度爆炸、声明文件膨胀和项目结构不合理共同作用的结果。
Svelte 编译原理：没有虚拟 DOM 的框架如何工作
主流前端框架 React 和 Vue 都依赖虚拟 DOM（Virtual DOM）作为其渲染和更新机制的核心抽象。然而，Svelte 选择了一条截然不同的道路：它在编译阶段而非运行时将组件代码转换为高效的指令式 JavaScript，从而彻底摒弃了虚拟 DOM。
React 并发模式：Fiber 架构与 Suspense 原理
引言 React 18 的并发模式（Concurrent Mode）不是一项单一功能，而是一套底层重构后的调度体系。它的核心目标只有一个：在保证 UI 正确性的前提下，让高优先级更新能够中断低优先级渲染，从而避免组件树过于庞大时出现的卡顿。
PWA 渐进式 Web 应用：Service Worker 与离线体验
PWA（Progressive Web App，渐进式 Web 应用）是一种利用现代 Web 技术构建的应用形态，它兼具网页的可达性与原生应用的交互体验。通过 Service Worker、Cache Storage 和 Web App Manifest 三大核心技术，PWA 能够在弱网甚至无网环境
Monorepo 工程化选型：pnpm workspace、turborepo 与 nx 深度对比
随着前端项目复杂度持续攀升，越来越多的团队开始将多个相关联的包或应用收敛到同一个代码仓库中管理，这种模式被称为 Monorepo。与传统的 Multirepo（每个项目独立仓库）相比，Monorepo 在代码共享、跨项目重构、依赖一致性以及团队协作方面都有显著优势。
esbuild 原理：为什么它比传统打包器快 10-100 倍
在 2020 年，Evan Wallace 发布了 esbuild，一款用 Go 编写的 JavaScript 打包器。当时它宣告了一个惊人的事实：把 10 秒级的大型项目构建压缩到 0.1 秒以内。这个速度提升不是渐进优化，而是数量级的碾压。
Core Web Vitals 实战：LCP、FID、CLS 的测量与优化
引言：为什么 Core Web Vitals 至关重要 自 2021 年 Google 将页面体验（Page Experience）正式纳入搜索排名算法以来，Core Web Vitals（核心网页指标） 已成为衡量网站质量和 SEO 表现的核心维度之一。
API 设计与 BFF 层：REST、GraphQL、tRPC 选型与前后端协作
系统性 API 设计与 BFF（Backend for Frontend）实践：RESTful API 设计规范（HTTP 方法/状态码/资源命名/分页/版本控制）、HATEOAS、OpenAPI 规范与自动化（生成客户端/文档/Mock）、GraphQL 类型系统与查询优化（N+1/DataLoader/缓存）、tRPC 端到端类型安全、tRPC 路由与中间件、BFF 架构设计（职责边界/API 聚合/权限转发）、前后端协作模式（契约测试/API First/Mock Server）、API 版本化策略与平滑迁移、gRPC-Web 在浏览器场景的应用。附 Node.js/Go 实战。
WebAssembly 前端工程化实践：编译链、性能对比与混合架构
系统性 WebAssembly 前端实战：WASM 核心概念与运行模型（VM/线性内存/Table/Module/Instance）、主流编译工具链对比（Rust+wasm-pack / Go+wasm / C++/Emscripten / AssemblyScript）、WASM 与 JavaScript 互操作（export/import/memory/Table）、性能基准对比（WASM vs JS vs native）、前端典型应用场景（图像处理/编解码/加密/物理引擎/数据可视化）、WASM 模块异步加载与流式编译、多线程 WASM（SharedArrayBuffer + Atomics）、WASI（WebAssembly System Interface）演进。附 Rust→WASM 完整实战。
现代浏览器 API 与 Web 平台能力地图
系统性梳理现代浏览器原生 API 能力地图：Web Workers / Shared Workers 多线程计算、IndexedDB / Cache API / Storage API 客户端存储、Intersection Observer / Resize Observer / Mutation Observer 布局观测、Web Share / Web Share Target / Contact Picker 社交集成、Clipboard API / File System Access / Drag & Drop 数据交互、Web Bluetooth / Web NFC / Web Serial / Web HID / Web USB 硬件连接、Web Speech / Web Audio / MediaRecorder 多媒体、Payment Request / Credential Management 身份与支付、BroadcastChannel / Beacon / Reporting API 页面通信与报告。
前端安全进阶：XSS、CSP、SRI 与供应链安全
系统性前端安全深度指南：XSS 全分类（Reflected/Stored/DOM-based/mXSS）与防御矩阵（转义/CSP/DOMPurify/Trusted Types）、CSP（Content Security Policy）策略设计与部署、SRI（Subresource Integrity）校验、CSRF Token 与 SameSite Cookie、前端加密与密钥管理、npm 供应链安全（package-lock/audit/SBOM/openSSF Scorecard）、原型污染防御、eval/new Function 沙箱替代方案、浏览器安全头全览。附 Vue/React/Next.js 安全配置。
Web 可访问性（a11y）：合规标准、技术实现与用户体验
系统性 Web 可访问性指南：WCAG 2.1/2.2 标准解读（感知性/可操作性/可理解性/健壮性四大原则）、语义化 HTML 与 ARIA 正确使用、键盘导航与焦点管理、屏幕阅读器兼容（NVDA/JAWS/VoiceOver）、色彩对比度与色觉障碍、减少动态内容（prefers-reduced-motion）、表单可访问性、可访问性测试工具（axe-Core/Lighthouse/pa11y）、法律合规（ADA/EN 301 549/中国无障碍环境建设法）。附 Vue/React 实战代码。