From d8e289605a43ee33eadc3a687cac06209d230682 Mon Sep 17 00:00:00 2001 From: ronload <91997734+ronload@users.noreply.github.com> Date: Wed, 15 Apr 2026 15:12:15 +0800 Subject: [PATCH] perf(map): preload map chunk at module level and add tile CDN resource hints The previous approach waited for requestIdleCallback + next/dynamic render before starting the ~1 MB maplibre-gl chunk download, creating a serial waterfall that delayed map visibility by ~2.5s. Now the chunk downloads during hydration via a module-level import() guarded by matchMedia, and counties data is prefetched in parallel. Preconnect/dns-prefetch hints for basemaps.cartocdn.com and tiles.basemaps.cartocdn.com eliminate DNS+TLS latency for tile loading. Total map load time reduced from ~2.5s to ~1s. --- src/app/layout.tsx | 14 +++++++++ src/components/address-page.tsx | 55 ++++++++++++++++++--------------- 2 files changed, 44 insertions(+), 25 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index db64545..a78ca91 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -68,6 +68,20 @@ export default function RootLayout({ suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`} > + + + + + + import("@/components/taiwan-map").then((m) => m.TaiwanMap), - { - ssr: false, - loading: () => ( -
- ), - }, -); +// Module-level: start downloading the map chunk during hydration (before any +// useEffect fires). Only on desktop to avoid wasting mobile bandwidth. +// Also prime the HTTP cache for counties data in parallel. +const isDesktopAtLoad = + typeof window !== "undefined" && + window.matchMedia("(min-width: 1024px)").matches; + +const mapModulePromise = isDesktopAtLoad + ? import("@/components/taiwan-map") + : null; + +if (isDesktopAtLoad) { + void fetch("/data/map/counties-10t.json"); +} const MapPlaceholder = () => (
@@ -28,25 +32,26 @@ interface AddressPageProps { export function AddressPage({ cities }: AddressPageProps) { const addressState = useAddressState(); const isDesktop = useMediaQuery("(min-width: 1024px)"); - const [mapReady, setMapReady] = useState(false); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const [TaiwanMap, setTaiwanMap] = useState | null>(null); useEffect(() => { if (!isDesktop) return; - if (typeof requestIdleCallback === "function") { - const id = requestIdleCallback(() => { - setMapReady(true); - }); - return () => { - cancelIdleCallback(id); - }; - } + let cancelled = false; + + // If the module-level preload started, reuse that promise; + // otherwise start a fresh download (e.g. viewport was resized to desktop). + const promise = mapModulePromise ?? import("@/components/taiwan-map"); + + void promise.then((mod) => { + if (!cancelled) { + setTaiwanMap(() => mod.TaiwanMap); + } + }); - const id = setTimeout(() => { - setMapReady(true); - }, 0); return () => { - clearTimeout(id); + cancelled = true; }; }, [isDesktop]); @@ -56,7 +61,7 @@ export function AddressPage({ cities }: AddressPageProps) { {isDesktop && (
- {mapReady ? ( + {TaiwanMap ? (