From fe1ac9b1155ea44b0c6c63b059be756209b94b52 Mon Sep 17 00:00:00 2001 From: Maxwell Cohen Date: Sun, 22 Mar 2026 15:33:58 -0500 Subject: [PATCH] Refactor component imports to use dynamic loading in Page and MDXComponents --- src/components/Layout/Page.tsx | 29 +++++--- src/components/MDX/MDXComponents.tsx | 105 ++++++++++++++++++++------- 2 files changed, 100 insertions(+), 34 deletions(-) diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index aa39fe5fc2b..4b3a6a98af1 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -12,25 +12,36 @@ import {Suspense} from 'react'; import * as React from 'react'; import {useRouter} from 'next/router'; -import {SidebarNav} from './SidebarNav'; -import {Footer} from './Footer'; -import {Toc} from './Toc'; // import SocialBanner from '../SocialBanner'; -import {DocsPageFooter} from 'components/DocsFooter'; -import {Seo} from 'components/Seo'; -import PageHeading from 'components/PageHeading'; import {getRouteMeta} from './getRouteMeta'; -import {TocContext} from '../MDX/TocContext'; import {Languages, LanguagesContext} from '../MDX/LanguagesContext'; import type {TocItem} from 'components/MDX/TocContext'; import type {RouteItem} from 'components/Layout/getRouteMeta'; -import {HomeContent} from './HomeContent'; import {TopNav} from './TopNav'; import cn from 'classnames'; import Head from 'next/head'; - +import dynamic from 'next/dynamic'; import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock'); +const HomeContent = dynamic(() => + import('./HomeContent').then((mod) => mod.HomeContent) +); +const DocsPageFooter = dynamic(() => + import('components/DocsFooter').then((mod) => mod.DocsPageFooter) +); +const SidebarNav = dynamic(() => + import('./SidebarNav').then((mod) => mod.SidebarNav) +); +const Toc = dynamic(() => import('./Toc').then((mod) => mod.Toc)); +const Footer = dynamic(() => import('./Footer').then((mod) => mod.Footer)); +const Seo = dynamic(() => import('components/Seo').then((mod) => mod.Seo)); +const PageHeading = dynamic(() => + import('components/PageHeading').then((mod) => mod.default) +); +const TocContext = dynamic(() => + import('../MDX/TocContext').then((mod) => mod.TocContext) +); + interface PageProps { children: React.ReactNode; toc: Array; diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 334e72f3482..c698ef9d960 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -14,37 +14,92 @@ import * as React from 'react'; import cn from 'classnames'; import type {HTMLAttributes} from 'react'; -import CodeBlock from './CodeBlock'; -import {CodeDiagram} from './CodeDiagram'; -import {ConsoleBlock, ConsoleLogLine, ConsoleBlockMulti} from './ConsoleBlock'; -import ExpandableCallout from './ExpandableCallout'; -import ExpandableExample from './ExpandableExample'; import {H1, H2, H3, H4, H5} from './Heading'; -import InlineCode from './InlineCode'; -import Intro from './Intro'; -import BlogCard from './BlogCard'; -import Link from './Link'; -import {PackageImport} from './PackageImport'; -import Recap from './Recap'; -import {SandpackClient as Sandpack, SandpackRSC} from './Sandpack'; -import SandpackWithHTMLOutput from './SandpackWithHTMLOutput'; -import Diagram from './Diagram'; -import DiagramGroup from './DiagramGroup'; -import SimpleCallout from './SimpleCallout'; -import TerminalBlock from './TerminalBlock'; -import YouWillLearnCard from './YouWillLearnCard'; -import {Challenges, Hint, Solution} from './Challenges'; -import {IconNavArrow} from '../Icon/IconNavArrow'; -import ButtonLink from 'components/ButtonLink'; import {TocContext} from './TocContext'; import type {Toc, TocItem} from './TocContext'; -import {TeamMember} from './TeamMember'; import {LanguagesContext} from './LanguagesContext'; import {finishedTranslations} from 'utils/finishedTranslations'; +import dynamic from 'next/dynamic'; -import ErrorDecoder from './ErrorDecoder'; -import {IconCanary} from '../Icon/IconCanary'; -import {IconExperimental} from 'components/Icon/IconExperimental'; +const TeamMember = dynamic(() => + import('./TeamMember').then((mod) => mod.TeamMember) +); +const CodeBlock = dynamic(() => + import('./CodeBlock').then((mod) => mod.default) +); +const CodeDiagram = dynamic(() => + import('./CodeDiagram').then((mod) => mod.CodeDiagram) +); +const ConsoleBlock = dynamic(() => + import('./ConsoleBlock').then((mod) => mod.ConsoleBlock) +); +const ConsoleBlockMulti = dynamic(() => + import('./ConsoleBlock').then((mod) => mod.ConsoleBlockMulti) +); +const ConsoleLogLine = dynamic(() => + import('./ConsoleBlock').then((mod) => mod.ConsoleLogLine) +); +const ExpandableCallout = dynamic(() => + import('./ExpandableCallout').then((mod) => mod.default) +); +const ExpandableExample = dynamic(() => + import('./ExpandableExample').then((mod) => mod.default) +); +const InlineCode = dynamic(() => + import('./InlineCode').then((mod) => mod.default) +); +const Intro = dynamic(() => import('./Intro').then((mod) => mod.default)); +const BlogCard = dynamic(() => import('./BlogCard').then((mod) => mod.default)); +const Link = dynamic(() => import('./Link').then((mod) => mod.default)); +const PackageImport = dynamic(() => + import('./PackageImport').then((mod) => mod.PackageImport) +); +const Recap = dynamic(() => import('./Recap').then((mod) => mod.default)); +const Sandpack = dynamic(() => + import('./Sandpack').then((mod) => mod.SandpackClient) +); +const SandpackRSC = dynamic(() => + import('./Sandpack').then((mod) => mod.SandpackRSC) +); +const SandpackWithHTMLOutput = dynamic(() => + import('./SandpackWithHTMLOutput').then((mod) => mod.default) +); +const Diagram = dynamic(() => import('./Diagram').then((mod) => mod.default)); +const DiagramGroup = dynamic(() => + import('./DiagramGroup').then((mod) => mod.default) +); +const SimpleCallout = dynamic(() => + import('./SimpleCallout').then((mod) => mod.default) +); +const TerminalBlock = dynamic(() => + import('./TerminalBlock').then((mod) => mod.default) +); +const YouWillLearnCard = dynamic(() => + import('./YouWillLearnCard').then((mod) => mod.default) +); + +const Challenges = dynamic(() => + import('./Challenges').then((mod) => mod.Challenges) +); +const Hint = dynamic(() => import('./Challenges').then((mod) => mod.Hint)); +const Solution = dynamic(() => + import('./Challenges').then((mod) => mod.Solution) +); +const IconNavArrow = dynamic(() => + import('../Icon/IconNavArrow').then((mod) => mod.IconNavArrow) +); +const ButtonLink = dynamic(() => + import('components/ButtonLink').then((mod) => mod.default) +); +const ErrorDecoder = dynamic(() => + import('./ErrorDecoder').then((mod) => mod.default) +); +const IconCanary = dynamic(() => + import('../Icon/IconCanary').then((mod) => mod.IconCanary) +); +const IconExperimental = dynamic(() => + import('components/Icon/IconExperimental').then((mod) => mod.IconExperimental) +); function CodeStep({children, step}: {children: any; step: number}) { return (