MDN 新前端的内部机制

📌 一句话摘要

本文详细介绍了 MDN 如何从积重难返的 React 单体应用，重构为以 Lit、Web Components 和自研服务端组件为核心的轻量、解耦、高性能现代前端架构，并分享了其技术选型、架构设计与开发体验的全面提升。

📝 详细摘要

文章深入剖析了 MDN 前端架构的重大重构。面对旧有 React 应用（yari）因技术债务、CSS 耦合、SPA 模式与静态内容不匹配等问题导致的开发与维护困境，MDN 团队选择了 Lit、Web Components 和自研服务端组件作为新架构的核心。文章通过 Scrimba 交互组件和交互式示例两个具体案例，展示了 Web Components 如何优雅地解决在静态内容中嵌入交互功能的难题。更重要的是，新架构彻底摒弃了 SPA 模式，采用基于组件的静态模板拼接，实现了 CSS 和 JavaScript 的按需加载，并通过声明式 Shadow DOM 和巧妙的渐进增强策略优化了性能与用户体验。文章还介绍了基于 Baseline 项目的技术选型标准、使用 Rspack 带来的极速开发体验，以及一套扁平化、自动化的组件管理机制。这是一次从理念到实践的全栈现代化改造，对大型内容网站的前端架构演进具有极高的参考价值。

💡 主要观点

- 告别 React SPA 单体架构，拥抱基于 Web Components 的轻量、解耦体系。 旧架构因技术债务、CSS 耦合及 SPA 模式与静态内容不匹配而难以维护。新架构以 Lit 和 Web Components 为核心，将交互功能封装为独立组件，通过静态模板拼接页面，彻底解决了‘外壳’应用问题，实现了架构的现代化与可持续性。

实现极致的按需加载，CSS 和 JavaScript 资源仅在实际被渲染时才会加载。 通过扁平化的组件结构和自动化脚本，Web Components 的 JS 会在其自定义元素出现在 DOM 中时才被异步懒加载。服务端组件的 CSS 则通过构建时追踪，仅生成页面实际使用组件的样式链接。这从架构层面杜绝了资源浪费。

利用声明式 Shadow DOM 和渐进增强策略，优化核心交互功能的加载体验。 在服务端将 Web Components 渲染为声明式 Shadow DOM，使组件在 JS 加载前就已具备基本样式和结构。对于如下拉菜单等组件，通过巧妙的 CSS 规则，在 JS 加载前后都能保持可交互性，实现了无缝的渐进增强。

基于 Baseline 项目进行技术选型，平衡先进性、兼容性与开发成本。 采用 W3C Baseline 项目的‘广泛可用’、‘新近可用’、‘有限可用’标准作为技术采用指南。这确保了在放心使用现代 Web 平台能力（如自定义元素）的同时，对较新特性（如声明式 Shadow DOM）提供降级方案，保持 polyfill 集合的精简。

选用 Rspack 并简化开发流程，将开发服务器启动时间从分钟级降至秒级。 用基于 Rust 的 Rspack 替换 Webpack，结合新架构的简洁性，使得本地开发环境启动仅需 2 秒。统一的 npm run start 命令提供了接近生产环境的体验，极大提升了开发效率和贡献者体验。

💬 文章金句

- MDN 并不是一个特别复杂的网站 —— 至少从‘需要交互性’的角度来看不是。MDN 文档页面上的绝大部分内容就是 HTML 和 CSS：我们并不需要一个复杂的应用来驱动网站的大部分内容。我们本质上拥有的是一些交互性‘孤岛’，完全可以用 Web Components 来实现。

• 我们在架构层面就做到这一点，让‘不这样做’几乎不可能。我们通过多种方式实现了这一目标，而打开所有这些可能性的关键，是一套基于名称的扁平组件结构。
• 由于我们可以根据名称确定每个 Web Component 的位置，就能玩一些巧妙的花样。当页面加载时，我们在客户端运行逻辑对 DOM 中存在的所有自定义元素进行懒加载，完全异步、并行执行。
• 我们在页面一渲染出来时就拥有了一个纯 CSS 驱动的下拉菜单，随后在 JavaScript 加载完成后渐进增强为由 JavaScript 控制的下拉菜单；其他工程师无需了解这些内部机制，只需要知道下拉组件能正常工作即可。
• 构建这个新前端是一件无比愉悦的事情：能够用新的 Web 技术来构建记录这些技术的网站，这本身就是一种殊荣。

📊 文章信息

AI 初评：92

来源：前端早读课

作者：前端早读课

分类：软件编程

语言：中文

阅读时间：44 分钟

字数：10968

标签： 前端架构, Web Components, Lit, 性能优化, 重构

阅读完整文章