Next.js、React、TypeScript、前端工程化
This collection features articles and community discussions in the Web 开发 space, focusing on real-world engineering scenarios, tool selection, practical paths, and risk boundaries.
The page is continuously updated and serves as a learning roadmap, technology selection reference, and technical review entry point.
When packages and projects are scattered across multiple repositories, sharing code becomes difficult. This article explains monorepo benefits and costs, pnpm workspace basics, the tradeoffs between Turborepo and Nx, and which teams should adopt a monorepo.
Adding COOP/COEP to your homepage may enable SharedArrayBuffer, but it can also sever OAuth Popups, third-party iframes, and CDN resources. This article completes the migration using dependency closures, a reporting period, and runtime capability gates.
As products grow, UI values drift and components become inconsistent. This article explains Design Tokens as design atoms, layered component libraries from tokens to business components, theme switching, and a shared language that keeps design and engineering aligned.
Functional programming is not academic mysticism. It makes code more predictable, testable, and less error-prone. This guide covers practical FP in TypeScript: pure functions, immutability, composition, map/filter/reduce, Option/Either for null values and errors, and why pragmatic FP matters more than monad dogma.
Caching is the Swiss-army knife of performance optimization, but misuse produces stale data. This article covers the web's multi-layer caching — browser (HTTP caching / Service Worker), CDN, server (Redis / in-memory), and database (query cache) — what each layer caches, invalidation strategies, and how to maintain cache consistency.
Adding `@deprecated` does not mean consumers have migrated. This article uses a versioned lifecycle registry, static and runtime usage closure, idempotent Codemods, and visual and accessibility gates to make legacy component removal measurable and reversible.
Performance is not something you optimize occasionally; it must be maintained continuously. A performance budget sets a line that speed must never cross. This article explains how to allocate budgets across JS, images, and CSS, enforce them automatically in CI, and handle overruns by cutting features, optimizing, or negotiating.
When a frontend outgrows a single repository, micro-frontends split it much like microservices. This article covers the motivations and costs, Module Federation, iframes, Web Components, and route-based distribution, their trade-offs, and why most teams should stay with a monorepo.
When animations stutter, 90% of the time you triggered reflow or repaint. This article explains CSS animation performance: animate only transform/opacity (compositing layers, no layout), proper and improper use of will-change, avoiding layout thrashing, and respecting prefers-reduced-motion for a smooth 60fps.
Browser errors need context, but full-page recordings, request bodies, and console output can easily capture tokens and personal data. This article defines a client-redacted, budgeted Support Bundle that helps support teams reproduce UI failures without copying user sessions by default.
Vercel is not the only way to deploy Next.js: self-hosting with Docker, Node, or static export, edge deployment, and hybrid approaches have different tradeoffs. This article compares four deployment models, their costs, and the build-vs-run pitfalls of NEXT_PUBLIC environment variables.
Accessibility is not a benefit for a minority. It supports ADA and EAA compliance, improves SEO, and raises product quality. This guide covers WCAG's four POUR principles, common frontend a11y failures, automated checks, manual testing, and accessibility gates in CI.