feat: lazy load for page components

src/app/layout.tsx

@@ -1,4 +1,3 @@
-import "aplayer-react/dist/index.css"
 import { dir } from "i18next"
 import { Metadata } from "next"
 import { Toaster } from "react-hot-toast"

src/app/site/[site]/layout.tsx

@@ -5,7 +5,7 @@ import { notFound } from "next/navigation"
 import { Hydrate, dehydrate } from "@tanstack/react-query"
 
 import { BlockchainInfo } from "~/components/common/BlockchainInfo"
-import { Style } from "~/components/common/Style"
+import Style from "~/components/common/Style"
 import { BackToTopFAB } from "~/components/site/BackToTopFAB"
 import SiteFooter from "~/components/site/SiteFooter"
 import { SiteHeader } from "~/components/site/SiteHeader"

src/components/common/Style.tsx

@@ -1,6 +1,6 @@
 import { toGateway } from "~/lib/ipfs-parser"
 
-export const Style: React.FC<{
+const Style: React.FC<{
   content?: string
   children?: React.ReactNode[]
 }> = ({ content, children }) => {
@@ -22,3 +22,5 @@ export const Style: React.FC<{
     />
   )
 }
+
+export default Style

src/components/ui/APlayer.tsx

@@ -1,9 +1,10 @@
 import { APlayer as AplayerReact } from "aplayer-react"
+import "aplayer-react/dist/index.css"
 import { memo } from "react"
 
 import { toGateway } from "~/lib/ipfs-parser"
 
-export const APlayer: React.FC<
+const APlayer: React.FC<
   {
     name?: string
     artist?: string
@@ -45,3 +46,5 @@ export const APlayer: React.FC<
     />
   )
 })
+
+export default APlayer

src/components/ui/Image.tsx

@@ -151,7 +151,7 @@ export const Image: React.FC<TImageProps> = ({
   )
 }
 
-export const ZoomedImage: React.FC<TImageProps> = (props) => {
+const ZoomedImage: React.FC<TImageProps> = (props) => {
   return (
     <span className="text-center block">
       {/* eslint-disable-next-line jsx-a11y/alt-text */}
@@ -159,3 +159,5 @@ export const ZoomedImage: React.FC<TImageProps> = (props) => {
     </span>
   )
 }
+
+export default ZoomedImage

src/components/ui/Mention.tsx

@@ -18,7 +18,7 @@ const getSiteId = ({ id, children }: { id: string; children?: any }) => {
   }
 }
 
-export const Mention: React.FC<{
+const Mention: React.FC<{
   id: string
   children?: any
 }> = memo(
@@ -48,3 +48,5 @@ export const Mention: React.FC<{
     return getSiteId(prevProps) === getSiteId(nextProps)
   },
 )
+
+export default Mention

src/components/ui/Mermaid.tsx

@@ -6,9 +6,9 @@ import { FC, memo, useEffect, useState } from "react"
 import { useIsDark } from "~/hooks/useDarkMode"
 import { useIsUnmounted } from "~/hooks/useLifecycle"
 
-import { ZoomedImage } from "./Image"
+import ZoomedImage from "./Image"
 
-export const Mermaid: FC<{
+const Mermaid: FC<{
   children: [string]
 }> = memo(
   function Mermaid(props) {
@@ -95,3 +95,5 @@ export const Mermaid: FC<{
     return prevProps.children?.[0] === nextProps.children?.[0]
   },
 )
+
+export default Mermaid

src/components/ui/Tweet.tsx

@@ -7,6 +7,6 @@ const components: TweetComponents = {
   MediaImg: (props) => <Image {...props} fill unoptimized />,
 }
 
-export function Tweet({ id }: { id: string }) {
+export default function Tweet({ id }: { id: string }) {
   return <ReactTweet id={id} components={components} />
 }

src/markdown/index.ts

@@ -29,13 +29,6 @@ import remarkParse from "remark-parse"
 import remarkRehype from "remark-rehype"
 import { unified } from "unified"
 
-import { Style } from "~/components/common/Style"
-import { APlayer } from "~/components/ui/APlayer"
-import { ZoomedImage } from "~/components/ui/Image"
-import { Mention } from "~/components/ui/Mention"
-import { Mermaid } from "~/components/ui/Mermaid"
-import { Tweet } from "~/components/ui/Tweet"
-
 import { rehypeAudio } from "./rehype-audio"
 import {
   allowedCustomWrappers,
@@ -54,6 +47,12 @@ import { remarkPangu } from "./remark-pangu"
 import { remarkYoutube } from "./remark-youtube"
 import sanitizeScheme from "./sanitize-schema"
 
+const ZoomedImage = dynamic(() => import("~/components/ui/Image"))
+const Style = dynamic(() => import("~/components/common/Style"))
+const Mention = dynamic(() => import("~/components/ui/Mention"))
+const Mermaid = dynamic(() => import("~/components/ui/Mermaid"))
+const Tweet = dynamic(() => import("~/components/ui/Tweet"))
+const APlayer = dynamic(() => import("~/components/ui/APlayer"))
 const DPlayer = dynamic(() => import("~/components/ui/DPlayer"), {
   ssr: false,
 })