![]()
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,用户侧感知是页面变快了,工程师侧感知是晚上能睡好了。
你的项目里,有没有那种"为了技术而技术"的架构包袱?
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.