perf(rmaps): preload MapLibre GL, switch CDN from unpkg to jsDelivr

Add <link rel="preload"> hints for MapLibre JS+CSS in the module HTML
so the browser starts fetching them in parallel with the main bundle,
instead of waiting until joinRoom() calls loadMapLibre().

Switch from unpkg (slow, no HTTP/2) to jsDelivr (faster edge caching).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-25 17:03:21 -07:00
parent 101cc3b848
commit 44a69e665e
2 changed files with 8 additions and 4 deletions

View File

@ -23,8 +23,8 @@ import { startPresenceHeartbeat } from '../../../shared/collab-presence';
// MapLibre loaded via CDN — use window access with type assertion
const MAPLIBRE_CSS = "https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.css";
const MAPLIBRE_JS = "https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.js";
const MAPLIBRE_CSS = "https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.2/dist/maplibre-gl.css";
const MAPLIBRE_JS = "https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.2/dist/maplibre-gl.js";
const OSM_ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

View File

@ -274,7 +274,9 @@ routes.get("/", (c) => {
spaceSlug: space,
modules: getModuleInfoList(),
body: `<folk-map-viewer space="${space}"></folk-map-viewer>`,
scripts: `<script type="module" src="/modules/rmaps/folk-map-viewer.js?v=4"></script>`,
scripts: `<link rel="preload" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.2/dist/maplibre-gl.js" as="script">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.2/dist/maplibre-gl.css" as="style">
<script type="module" src="/modules/rmaps/folk-map-viewer.js?v=5"></script>`,
styles: `<link rel="stylesheet" href="/modules/rmaps/maps.css?v=3">`,
}));
});
@ -291,7 +293,9 @@ routes.get("/:room", (c) => {
modules: getModuleInfoList(),
styles: `<link rel="stylesheet" href="/modules/rmaps/maps.css?v=3">`,
body: `<folk-map-viewer space="${space}" room="${room}"></folk-map-viewer>`,
scripts: `<script type="module" src="/modules/rmaps/folk-map-viewer.js?v=4"></script>`,
scripts: `<link rel="preload" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.2/dist/maplibre-gl.js" as="script">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.2/dist/maplibre-gl.css" as="style">
<script type="module" src="/modules/rmaps/folk-map-viewer.js?v=5"></script>`,
}));
});