Lazy-import GlobeMap + add manualChunk for globe.gl/three to slash initial JS for non-globe users #3534

Summary

Every user that loads the map currently downloads globe.gl + three (~74MB on disk) regardless of whether they ever enable globe mode. Two compounding causes:

Cause 1 — MapContainer.ts:7-9 statically imports both map implementations

import { MapComponent } from './Map';
import { DeckGLMap, ... } from './DeckGLMap';
import { GlobeMap } from './GlobeMap';

MapContainer itself is dynamically imported (panel-layout.ts:863), but inside MapContainer.ts, ALL three implementations (D3 fallback, deck.gl, globe.gl) are eager. The runtime isMobileDevice() / globe-mode check happens AFTER all three are downloaded.

Cause 2 — No manualChunk for globe.gl / three

vite.config.ts:953-1005 manualChunks has branches for transformers, onnxruntime, maplibre, deck-stack, d3, topojson, i18next, sentry — but none for globe.gl or three. They land in whatever chunk Rollup auto-creates from GlobeMap.ts's import graph (likely fused into the MapContainer chunk).

Reproduce

pnpm build and inspect chunk sizes — the map-stack chunk includes globe.gl + three even though most users never use globe mode.

Likely fix

1. Lazy-load GlobeMap inside MapContainer:

   // Replace static import with on-demand:
   private async loadGlobeMap() {
     const { GlobeMap } = await import('./GlobeMap');
     return GlobeMap;
   }

   Trigger from the settings toggle that switches to globe mode. Falls back to DeckGLMap until then.

2. Add manualChunk in vite.config.ts:

   if (id.includes('/globe.gl/') || id.includes('/three/')) {
     return 'globe-stack';
   }

   And add 'globe-stack' to LAZY_HTML_PRELOAD_CHUNKS so it's stripped from HTML modulepreload.

Severity

P0 — biggest single bundle-size lever in the codebase. For users who never enable globe mode (likely the majority on web), this is pure waste on every page load.

Related

• MapContainer.ts:7-9 (eager imports)
• vite.config.ts:953-1005 (manualChunks), :24 (LAZY_HTML_PRELOAD_CHUNKS)
• panel-layout.ts:863 (dynamic import of MapContainer)

Source

Manual code review (deepseek perf list, validated 2026-05-01).