Function: injectPreconnects()

function injectPreconnects(hosts): string[]

Injects <link rel="preconnect"> (and a <link rel="dns-prefetch"> fallback) tags into document.head for the given origins, so the browser starts the DNS + TLS handshake before MapLibre actually requests sprite/glyph/tile resources.

Call this as early as possible — ideally before initializeSDK — to maximize the savings. In real captures this shaves ~150-300 ms off the first-paint cascade.

Idempotent: hosts that already have a <link rel="preconnect" crossorigin> are skipped. If an existing preconnect link is missing crossorigin, it is upgraded in place (added crossorigin="anonymous") — without that attribute the warmed socket can’t be reused for the CORS tile/font/sprite fetches MapLibre performs, so leaving the existing link untouched would silently defeat the optimization. Existing crossorigin="use-credentials" is respected and never overwritten.

Parameters

hosts

readonly string[]

Origin URLs ("https://tiles.mapvx.com") or bare hostnames ("tiles.mapvx.com", normalized to https://). Invalid entries are silently ignored.

Returns

string[]

The origins where the helper made a change — either a new link was appended, or an existing one was upgraded with crossorigin="anonymous".

Example

import { initializeSDK, injectPreconnects, MAPVX_DEFAULT_PRECONNECT_HOSTS } from "@mapvx/web-js"
 
injectPreconnects(MAPVX_DEFAULT_PRECONNECT_HOSTS)
const sdk = initializeSDK(apiKey)