mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
Maurice
c089e75f08
* perf(map): load one GL engine instead of both MapViewGL, JourneyMapGL and the settings preview each imported mapbox-gl and maplibre-gl statically, so rollup emitted one 2.83 MB chunk carrying both. Every map user downloaded 1.8 MB of mapbox plus 1.03 MB of maplibre and then ran exactly one of them. The 110 kB stylesheet was merged the same way. mapbox users 2,827,647 -> 1,797,952 B (-1.03 MB, CSS 110.6 -> 40.8 kB) maplibre users 2,827,647 -> 1,027,635 B (-1.80 MB, CSS 110.6 -> 69.8 kB) The engine is a prop now rather than a module import, and the pairing happens behind the lazy boundary in glLazy.tsx. No module reaches both SDKs statically any more, which is the whole mechanism — the components themselves stayed engine-agnostic, they already guarded on the provider everywhere the two genuinely differ. Both imports of a pair start together instead of in sequence: the engine is by far the larger half, and fetching the component first would put its round trip in front of the download that actually costs time. check:gl-split guards it. A stray static import anywhere in the map tree brings the merged chunk straight back with a green build and a working app, so the script greps the built chunks for a marker of each SDK and fails when one file holds both. Not on the bare string "maplibre" — the provider value and the maplibre_style setting key appear in app code too, so that matches the shared core chunk as well. Two boundaries were missing and are added here, because the split makes them reachable: the GL boundaries had no resetKeys, so a chunk failure under one provider kept showing Leaflet after switching to the other, and the settings preview had a Suspense but no boundary at all — that is the one place a user flips providers live, so it is the likeliest chunk to fail. Worth being precise about the gain: the service worker precaches every chunk, so an installed PWA still downloads both engines. What this buys is the critical path on a cold cache, and parse/compile/execute always — a megabyte of unused engine ran on every map open. * perf(client): split out the video player and the ISO subdivision data Two heavyweights that shipped with routes that rarely use them. plyr (112 kB raw / 33 kB gzip, plus 32 kB of CSS) hung off three lightboxes and through them off the FileManager, JournalBody and MTripShell chunks. The lightboxes only render the player on their video branch anyway, so the split costs one frame of placeholder — a black rectangle in the target geometry, so the lightbox does not jump when the chunk lands. iso-3166-2 is a single 238 kB data blob with no tree-shaking to be had, and only fetchRegionOptions touches it. It now loads after the hasRegions check, so it is fetched only for countries that get a region picker at all: holidayRegions drops from 257 kB to 14 kB. The import sits inside the existing try — a failed chunk yields the same empty array as a failed request, rather than an unhandled rejection in the two callers that only do .then(setRegions). tz-lookup is deliberately left alone. TransitSearchPanel builds the departure time it sends to MOTIS out of tzAt(), so a not-yet-loaded window there is a wrong query rather than a late pixel — that one needs its own change with its own care.
48 lines
1.7 KiB
JavaScript
48 lines
1.7 KiB
JavaScript
import { readdirSync, readFileSync, statSync } from 'node:fs'
|
|
import { join } from 'node:path'
|
|
|
|
/**
|
|
* Fails when a built chunk contains both WebGL map engines.
|
|
*
|
|
* mapbox-gl and maplibre-gl used to be static imports in the same three
|
|
* components, so rollup emitted a single 2.8 MB chunk carrying both. Every map
|
|
* user downloaded 1.8 MB of mapbox plus 1.1 MB of maplibre and ran one of them.
|
|
* A stray static import anywhere in the map tree brings that straight back, and
|
|
* nothing else would notice — the build stays green and the app still works.
|
|
*
|
|
* The markers are chosen to appear only inside the SDKs themselves, verified in
|
|
* node_modules. Do NOT test for the bare string "maplibre": the provider value
|
|
* 'maplibre-gl' and the setting key maplibre_style also appear in app code, so it
|
|
* matches the shared core chunk too.
|
|
*/
|
|
const DIR = 'dist/assets'
|
|
const MAPBOX = 'events.mapbox.com' // 1 hit in mapbox-gl, 0 in maplibre-gl
|
|
const MAPLIBRE = 'maplibregl-canvas' // 2 hits in maplibre-gl, 0 in mapbox-gl
|
|
|
|
let mixed = 0
|
|
let found = 0
|
|
|
|
for (const file of readdirSync(DIR).filter(f => f.endsWith('.js'))) {
|
|
const path = join(DIR, file)
|
|
const src = readFileSync(path, 'utf8')
|
|
const hasMapbox = src.includes(MAPBOX)
|
|
const hasMaplibre = src.includes(MAPLIBRE)
|
|
if (!hasMapbox && !hasMaplibre) continue
|
|
|
|
found++
|
|
const size = statSync(path).size
|
|
if (hasMapbox && hasMaplibre) {
|
|
console.error(`FAIL both GL engines in one chunk: ${file} (${size} B)`)
|
|
mixed++
|
|
} else {
|
|
console.log(`${hasMapbox ? 'mapbox ' : 'maplibre'} ${file} ${size} B`)
|
|
}
|
|
}
|
|
|
|
if (!found) {
|
|
console.error('FAIL no chunk contains either GL engine — did the build run?')
|
|
process.exit(1)
|
|
}
|
|
|
|
process.exit(mixed ? 1 : 0)
|