MDN 1年重构3万行代码：React"脱钩"后性能反涨40%

MDN去年悄悄换了套前端骨架。表面看只是皮肤变了，实际上工程师把地基全拆了重建——从React全家桶切到原生技术栈，首屏加载时间砍掉近四成。

这事得从MDN的内容流水线说起。文档从仓库到网页要过三道闸：先由Yari构建工具把Markdown转成HTML，再塞进React壳里，最后打包成静态文件丢给CDN。听起来顺畅，实际跑起来像用跑车拉水泥——React这层"包装纸"越来越厚，维护成本指数级上涨。

技术债滚成雪球

MDN的前端代号Yari，2019年用Create React App脚手架起家。CRA的默认配置很快不够用，团队被迫"弹出"配置，手写了一套极其复杂的Webpack脚本。CSS更乱：Sass和CSS变量混用，作用域像 spaghetti（意大利面条），改个按钮颜色能波及三个无关组件。

最尴尬的是React和内容的"离婚状态"。MDN 95%的页面是静态文档，React壳子根本碰不到里面的HTML——团队用了dangerouslySetInnerHTML（危险地设置内部HTML）这个API，直接把构建好的HTML塞进去。需要交互的地方？比如代码块的"复制"按钮，得用原生DOM API另写一套，和React主流程各玩各的。

「我们像是在给静态网站强行套SPA（单页应用）的马甲」，MDN工程师在复盘帖里写道。每次修bug或加功能，技术债就厚一层。

新架构：React出局，原生上位

2023年，团队决定彻底推倒。新方案的核心就一条：静态内容用静态方案，交互孤岛单独处理。

构建层保留了Yari，但输出从"React壳包HTML"变成纯HTML文件。样式系统用PostCSS+Lightning CSS重写，砍掉Sass，CSS变量统一管理，最终打包成按需加载的独立文件——用户打开页面时，只下载实际用到的样式。

交互部分改用Web Components（网页组件）。代码块的"复制"按钮、折叠面板这些小部件，封装成自定义元素，不依赖任何框架。团队算了笔账：整个站点只剩3处需要客户端JavaScript，总代码量从数MB压到几十KB。

性能数字说话

重构前后的对比很直观。首屏时间（LCP，最大内容绘制）从2.8秒降到1.7秒，降幅39%；总阻塞时间（TBT）从680毫秒压到90毫秒。最意外的是，开发体验也变了——以前改个样式要重启整个React dev server，现在直接刷新浏览器就行。

「我们一度以为需要React才能做好组件化，结果发现Web Components在99%的场景够用了」，工程师在帖子里坦承。唯一保留的React代码是站点搜索，因为那确实是个正儿八经的SPA场景。

这事给前端圈扔了个问题：当你的产品内容属性远大于应用属性时，React这类重型框架是不是从一开始就选型过度？MDN的答案写在代码里——3万行React代码变成800行Web Components，用户侧感知是页面变快了，工程师侧感知是晚上能睡好了。

你的项目里，有没有那种"为了技术而技术"的架构包袱？