perf(post): lazy-link maplibre's stylesheet instead of bundling it
The engine was already a lazy import(), but its CSS was a static one — the usual workaround for esbuild never emitting a <link> for a code-split chunk's stylesheet (R10). That folded the whole vendor sheet into post-form.css, so every /post load paid for a panel most submits never open, and ~78% of those bytes were rules for controls this map never creates (popups, geolocate, zoom, compass, fullscreen, terrain, scale). Build the vendor sheet as its own css-compiled/maplibre-gl.css and have location-map.js <link> it at panel-open, concurrently with the engine's import(). Keeping the file intact rather than hand-picking the ~16 selectors in use means a maplibre upgrade can't silently un-style the map. post-form.css 92,244 → 26,784 raw (14,528 → 5,631 gzip) The href resolves from import.meta.url, so it is correct under any Grav base path without threading a URL through the template — the panel is built entirely in JS, so there is no element to hang a data-attr on. A failed stylesheet load resolves rather than rejects: the map degrades to unstyled, never to absent. The existing lazy-load guard spec already matched every maplibre-gl URL, so it covers the stylesheet too; its message now says so, and a new test asserts the other half — that opening the panel does link and apply the sheet.
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "node scripts/gen-weather-icons.js && esbuild js/src/main.js --bundle --minify --format=iife --outfile=js/main.js --loader:.woff2=file --loader:.woff=file --asset-names=../fonts/[name] && esbuild js/src/map.js --bundle --minify --format=iife --outfile=js/map.js && esbuild js/src/feed-actions.js --bundle --minify --format=iife --outfile=js/feed-actions.js && esbuild js/src/trip-publish.js --bundle --minify --format=iife --outfile=js/trip-publish.js && rm -rf js/post && esbuild js/src/post-form.js --bundle --minify --format=esm --splitting --outdir=js/post && mkdir -p css-compiled fonts && { mv js/main.css css-compiled/main.css 2>/dev/null || true; } && { mv js/map.css css-compiled/map.css 2>/dev/null || true; } && { mv js/post/post-form.css css-compiled/post-form.css 2>/dev/null || true; }"
|
||||
"build": "node scripts/gen-weather-icons.js && esbuild js/src/main.js --bundle --minify --format=iife --outfile=js/main.js --loader:.woff2=file --loader:.woff=file --asset-names=../fonts/[name] && esbuild js/src/map.js --bundle --minify --format=iife --outfile=js/map.js && esbuild js/src/feed-actions.js --bundle --minify --format=iife --outfile=js/feed-actions.js && esbuild js/src/trip-publish.js --bundle --minify --format=iife --outfile=js/trip-publish.js && rm -rf js/post && esbuild js/src/post-form.js --bundle --minify --format=esm --splitting --outdir=js/post && mkdir -p css-compiled fonts && esbuild node_modules/maplibre-gl/dist/maplibre-gl.css --bundle --minify --outfile=css-compiled/maplibre-gl.css && { mv js/main.css css-compiled/main.css 2>/dev/null || true; } && { mv js/map.css css-compiled/map.css 2>/dev/null || true; } && { mv js/post/post-form.css css-compiled/post-form.css 2>/dev/null || true; }"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/dm-sans": "latest",
|
||||
|
||||
Reference in New Issue
Block a user