Under the hood of MDN's new frontend
MDNのフロントエンドアーキテクチャの刷新についての解説記事。
旧フロントエンド(Yari)はCreate React Appベースで、eject後のwebpack設定の複雑化などの技術的負債を抱えていた。
Sassと最新CSSの混在や、dangerouslySetInnerHTMLによる静的コンテンツの埋め込みなどの課題もあった。
新アーキテクチャではLitベースのWeb Componentsを採用し、独自のServer Components実装でSPAの課題を解決している。
ビルドツールをwebpackからRspackへ移行、Declarative Shadow DOMやBaselineプロジェクトを活用したブラウザ互換性の管理についても解説されている。