Drop the country-map poster wall: +292 KB on every country page
country-map.vue's poster-wall wiring put the poster table, peopleGroupRecords and the sheet code into the bundle of EVERY DX Life country page, for a wall that is hidden by default. Measured: country-map.js 391,475 bytes on development against 683,401 here -- +291,926, a 74% increase -- and with it removed the bundle is 391,625, back within 150 bytes of development. Making the three imports lazy does not help, and I measured that rather than assuming it: with all three behind await import() and the table fetched at mount, the bundle grew to 684,700. vite.config.js:282 sets inlineDynamicImports, so a dynamic import is flattened straight back in and only the wrapper is added. Removing the weight needs the pinned-served-asset pattern that poster-render.js already uses -- card PERF-LOAD-THE-PRINTING-SUBSYSTEM-ON-DEMAND. library/packet/countrySheet.js stays: it is unreached at runtime (0 hits in the built bundle) so it adds nothing, and it is the library half this element will use once the printing code loads on demand. ProfileLoader's comment now names both populations -- 20 of the 25 bundles are single-profile, 10 of the 17 that actually mount this loader, which are the only ones the default affects.
This commit is contained in:
Doxa Maps
parent
6f08763bad
commit
a6279064c4
6 changed files with 32 additions and 470 deletions
|
|
@ -97,7 +97,7 @@ if (!profileModules) {
|
|||
// it read as a blank map rather than a misconfiguration.
|
||||
// For a bundle that registers exactly ONE profile there is no ambiguity to resolve: the only
|
||||
// profile IS the answer, and requiring the host to name it makes a single-element bundle harder to
|
||||
// embed than the paste-anywhere promise it exists for. 20 of the 25 bundles are single-profile.
|
||||
// embed than the paste-anywhere promise it exists for. 20 of the 25 bundles are single-profile (10 of the 17 that mount this loader).
|
||||
// A bundle with SEVERAL profiles still requires the name — guessing there would silently mount the
|
||||
// wrong surface, which is worse than the warning. So the fallback is conditional on the count, not
|
||||
// on the name being absent.
|
||||
|
|
|
|||
|
|
@ -33,26 +33,6 @@ import { toNumber, PEOPLE_GROUP_LIST_FIELDS } from '@map/utils/countries-meta.js
|
|||
import { peopleGroupPoints, PEOPLE_GROUP_POINT_FIELDS } from '@map/utils/peopleGroupPoints.js'
|
||||
import { applyPeopleGroupList } from '@map/lists/peopleGroupList.js'
|
||||
import { useRegionsI18n } from '@map/i18n/useRegionsI18n.js'
|
||||
import { retryableAsyncComponent } from '@map/composables/retryableAsyncComponent.js'
|
||||
import { createPeopleGroupRecords } from '@map/lists/peopleGroupRecords.js'
|
||||
import { makeCountrySheet } from '@map/packet/countrySheet.js'
|
||||
import { resolveAssetsBase } from '@map/utils/embedBase.js'
|
||||
import posterData from '@map/data/country-posters.json'
|
||||
|
||||
// ★ THE PRINT SURFACE IS OPT-IN AND LAZY, AND BOTH HALVES MATTER.
|
||||
//
|
||||
// OPT-IN, because other sites embed this element. A page that does not set showPosters must render
|
||||
// exactly what it renders today; the surface is additive, never a change to the existing contract.
|
||||
//
|
||||
// LAZY, because PosterWall STATICALLY imports usePosterPrints, which pulls the whole printing
|
||||
// subsystem. A plain `import PosterWall` would therefore land that weight in every embed including
|
||||
// the ones that never turn the flag on, which is the opposite of opt-in. An async component keeps
|
||||
// it out until a page asks for it.
|
||||
//
|
||||
// retryableAsyncComponent, not raw defineAsyncComponent: Vue CACHES a rejected loader promise, so
|
||||
// one dropped request would disable the surface for the life of the page. Same reason
|
||||
// upg-100-list.vue uses it for its detail panel.
|
||||
const PosterWall = retryableAsyncComponent(() => import('@map/components/poster/PosterWall.vue'))
|
||||
|
||||
const props = defineProps({
|
||||
profileConfig: { type: String, default: '' },
|
||||
|
|
@ -101,43 +81,6 @@ const researchUrl = computed(() => cfg.value.researchUrl || 'https://doxa.life/r
|
|||
const prayBaseUrl = computed(() => cfg.value.prayBaseUrl || 'https://pray.doxa.life')
|
||||
const countryUrl = computed(() => cfg.value.countryUrl || 'https://doxa.life/regions/')
|
||||
const languageCode = computed(() => cfg.value.languageCode || cfg.value.locale || cfg.value.lang || 'en')
|
||||
|
||||
// OFF unless the host says otherwise, and only true for a literal true / 'true': an absent key, a
|
||||
// typo'd value or a stray string must not switch a public page's UI on by accident.
|
||||
const showPosters = computed(() => cfg.value.showPosters === true || cfg.value.showPosters === 'true')
|
||||
|
||||
// The wall shows THIS element's country, not a region's list, so its single item is the entry for
|
||||
// the first country code. An unknown code still yields a row, carrying the reason it cannot print,
|
||||
// exactly as the regions list does for a country with no poster.
|
||||
const POSTER_BY_ISO3 = new Map((posterData.countries || []).map((c) => [String(c.iso3 || '').toUpperCase(), c]))
|
||||
const posterItems = computed(() => {
|
||||
const iso3 = countryCodes.value[0]
|
||||
if (!iso3) return []
|
||||
const rec = POSTER_BY_ISO3.get(iso3)
|
||||
if (rec) return [rec]
|
||||
return [{
|
||||
id: `country-${iso3.toLowerCase()}`,
|
||||
iso3,
|
||||
label: iso3,
|
||||
count: 0,
|
||||
unsupportedReason: t('No poster has been generated for this country yet.'),
|
||||
}]
|
||||
})
|
||||
|
||||
const instanceId = computed(() => cfg.value.instanceId || 'country-map')
|
||||
const posterAssetsBase = computed(() => resolveAssetsBase(cfg.value))
|
||||
// The same shared provider the regions wall uses, not a copy of its fetch: one cached request per
|
||||
// language, and the same rows feed the sheet, so the printed map and the printed list cannot
|
||||
// disagree about which groups are in this country.
|
||||
const countryRecords = createPeopleGroupRecords({
|
||||
apiBase: () => prayBaseUrl.value,
|
||||
lang: () => languageCode.value,
|
||||
profileConfig: injectedCfg,
|
||||
})
|
||||
const countrySheet = makeCountrySheet({
|
||||
records: countryRecords,
|
||||
assetsBase: () => posterAssetsBase.value,
|
||||
})
|
||||
const { t } = useRegionsI18n()
|
||||
|
||||
// ★ THE ELEMENT FETCHES ITS OWN PINS. prayBaseUrl is in the contract, and it is the API base the
|
||||
|
|
@ -224,29 +167,4 @@ watch(() => [languageCode.value, countryCodes.value.join(',')], loadPoints)
|
|||
"Regionsdaten" all say regions. The people-groups sentence is already in the catalogue and
|
||||
already translated in all eleven, so this costs no new string. -->
|
||||
<p v-if="loadFailed" class="cm-status" role="status">{{ t('People groups could not be loaded. This is a connection problem, not a filter.') }}</p>
|
||||
<!-- OPT-IN. v-if, not v-show: an embed that never sets showPosters must not carry this markup at
|
||||
all, and the async component behind it is never even requested. Turning it on is a change to
|
||||
a live page, so no host is switched on here. -->
|
||||
<PosterWall
|
||||
v-if="showPosters && posterItems.length"
|
||||
:items="posterItems"
|
||||
:instance-id="instanceId"
|
||||
:assets-base="posterAssetsBase"
|
||||
:heading="''"
|
||||
:intro="''"
|
||||
unit="UPG"
|
||||
:item-noun="t('Country')"
|
||||
:item-noun-plural="t('Countries')"
|
||||
item-count-key="regions.countryCount"
|
||||
:records="(item) => countryRecords({ type: 'country', values: [item.iso3] })"
|
||||
:sheet="countrySheet"
|
||||
:card-stocks="true"
|
||||
:collapsible="false"
|
||||
:embedded="true"
|
||||
:section-heads="false"
|
||||
:columns="1"
|
||||
:unsupported="(c) => c.unsupportedReason || null"
|
||||
download-prefix="doxa-country"
|
||||
poster-action="print"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
|
||||
<!-- Bundle IIFE — registers the <doxa-country-map> custom element. -->
|
||||
<script src="../country-map.js" integrity="sha384-tH+7JqZsVy7YeQwAMaBy/Atog6AJ09Pq2tC2BObhSJmSREpgSVZimrtzfo8R6vZT" crossorigin="anonymous"></script>
|
||||
<script src="../country-map.js" integrity="sha384-YaehRnXFzeH2+f7y1rI6QCoj9h6xUWvaHGTeMdNsib9jtTY+tA4La2ahH2BxTeA6" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
// Mapbox token resolution — the A3 ladder, in precedence order:
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@
|
|||
"bundle": "country-map",
|
||||
"scriptUrl": "./country-map/country-map.js",
|
||||
"output": "dx-maps/country-map/country-map.js",
|
||||
"integrity": "sha384-tH+7JqZsVy7YeQwAMaBy/Atog6AJ09Pq2tC2BObhSJmSREpgSVZimrtzfo8R6vZT",
|
||||
"integrity": "sha384-YaehRnXFzeH2+f7y1rI6QCoj9h6xUWvaHGTeMdNsib9jtTY+tA4La2ahH2BxTeA6",
|
||||
"elements": [
|
||||
"doxa-country-map"
|
||||
],
|
||||
|
|
@ -190,8 +190,8 @@
|
|||
"scriptUrl": "./country-map/country-map.js",
|
||||
"embed": {
|
||||
"iframe": "<iframe src=\"./country-map/country-map/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
|
||||
"script": "<!-- MapLibre engine (the default), fetched early -->\n<link rel=\"preload\" as=\"script\" href=\"https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.js\" integrity=\"sha384-5+cfbwT0iiub6VsQAdn6yz16nr6sDiQoHx6tm4O8OVYXHYOxcffFmCJBL0dgdvGp\" crossorigin=\"anonymous\">\n<link rel=\"preload\" as=\"style\" href=\"https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.css\" integrity=\"sha384-uTttxo/aOKbdE5RlD/SPzSDoDmNvGlUYPjONi2MN/b7c9HPSvW07OIuyP7uL6jxK\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./country-map/country-map.js\" integrity=\"sha384-tH+7JqZsVy7YeQwAMaBy/Atog6AJ09Pq2tC2BObhSJmSREpgSVZimrtzfo8R6vZT\" crossorigin=\"anonymous\"></script>\n<!-- MapLibre draws this map and needs no token. For Mapbox, paste this map's embed.scriptMapbox from manifest.json instead: it sets \"provider\":\"mapbox\" and preloads the Mapbox engine; fill \"tk\" with your token. -->\n<doxa-country-map profile-config='{\"profile\":\"country-map\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-country-map>",
|
||||
"scriptMapbox": "<!-- Mapbox engine, fetched early -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<link rel=\"preload\" as=\"style\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.css\" integrity=\"sha384-rp1X/jJ9MpWPef9OimfXhOaOc4Gzs87yQvF+ajwY6X2H4PTeHNycNlLWiWvj7ehV\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./country-map/country-map.js\" integrity=\"sha384-tH+7JqZsVy7YeQwAMaBy/Atog6AJ09Pq2tC2BObhSJmSREpgSVZimrtzfo8R6vZT\" crossorigin=\"anonymous\"></script>\n<!-- Mapbox draws this map: fill \"tk\" with your Mapbox token. -->\n<doxa-country-map profile-config='{\"profile\":\"country-map\",\"provider\":\"mapbox\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-country-map>"
|
||||
"script": "<!-- MapLibre engine (the default), fetched early -->\n<link rel=\"preload\" as=\"script\" href=\"https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.js\" integrity=\"sha384-5+cfbwT0iiub6VsQAdn6yz16nr6sDiQoHx6tm4O8OVYXHYOxcffFmCJBL0dgdvGp\" crossorigin=\"anonymous\">\n<link rel=\"preload\" as=\"style\" href=\"https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.css\" integrity=\"sha384-uTttxo/aOKbdE5RlD/SPzSDoDmNvGlUYPjONi2MN/b7c9HPSvW07OIuyP7uL6jxK\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./country-map/country-map.js\" integrity=\"sha384-YaehRnXFzeH2+f7y1rI6QCoj9h6xUWvaHGTeMdNsib9jtTY+tA4La2ahH2BxTeA6\" crossorigin=\"anonymous\"></script>\n<!-- MapLibre draws this map and needs no token. For Mapbox, paste this map's embed.scriptMapbox from manifest.json instead: it sets \"provider\":\"mapbox\" and preloads the Mapbox engine; fill \"tk\" with your token. -->\n<doxa-country-map profile-config='{\"profile\":\"country-map\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-country-map>",
|
||||
"scriptMapbox": "<!-- Mapbox engine, fetched early -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<link rel=\"preload\" as=\"style\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.css\" integrity=\"sha384-rp1X/jJ9MpWPef9OimfXhOaOc4Gzs87yQvF+ajwY6X2H4PTeHNycNlLWiWvj7ehV\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./country-map/country-map.js\" integrity=\"sha384-YaehRnXFzeH2+f7y1rI6QCoj9h6xUWvaHGTeMdNsib9jtTY+tA4La2ahH2BxTeA6\" crossorigin=\"anonymous\"></script>\n<!-- Mapbox draws this map: fill \"tk\" with your Mapbox token. -->\n<doxa-country-map profile-config='{\"profile\":\"country-map\",\"provider\":\"mapbox\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-country-map>"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@
|
|||
"bundle": "country-map",
|
||||
"scriptUrl": "./country-map/country-map.js",
|
||||
"output": "dx-maps/country-map/country-map.js",
|
||||
"integrity": "sha384-tH+7JqZsVy7YeQwAMaBy/Atog6AJ09Pq2tC2BObhSJmSREpgSVZimrtzfo8R6vZT",
|
||||
"integrity": "sha384-YaehRnXFzeH2+f7y1rI6QCoj9h6xUWvaHGTeMdNsib9jtTY+tA4La2ahH2BxTeA6",
|
||||
"elements": [
|
||||
"doxa-country-map"
|
||||
],
|
||||
|
|
@ -190,8 +190,8 @@
|
|||
"scriptUrl": "./country-map/country-map.js",
|
||||
"embed": {
|
||||
"iframe": "<iframe src=\"./country-map/country-map/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
|
||||
"script": "<!-- MapLibre engine (the default), fetched early -->\n<link rel=\"preload\" as=\"script\" href=\"https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.js\" integrity=\"sha384-5+cfbwT0iiub6VsQAdn6yz16nr6sDiQoHx6tm4O8OVYXHYOxcffFmCJBL0dgdvGp\" crossorigin=\"anonymous\">\n<link rel=\"preload\" as=\"style\" href=\"https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.css\" integrity=\"sha384-uTttxo/aOKbdE5RlD/SPzSDoDmNvGlUYPjONi2MN/b7c9HPSvW07OIuyP7uL6jxK\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./country-map/country-map.js\" integrity=\"sha384-tH+7JqZsVy7YeQwAMaBy/Atog6AJ09Pq2tC2BObhSJmSREpgSVZimrtzfo8R6vZT\" crossorigin=\"anonymous\"></script>\n<!-- MapLibre draws this map and needs no token. For Mapbox, paste this map's embed.scriptMapbox from manifest.json instead: it sets \"provider\":\"mapbox\" and preloads the Mapbox engine; fill \"tk\" with your token. -->\n<doxa-country-map profile-config='{\"profile\":\"country-map\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-country-map>",
|
||||
"scriptMapbox": "<!-- Mapbox engine, fetched early -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<link rel=\"preload\" as=\"style\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.css\" integrity=\"sha384-rp1X/jJ9MpWPef9OimfXhOaOc4Gzs87yQvF+ajwY6X2H4PTeHNycNlLWiWvj7ehV\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./country-map/country-map.js\" integrity=\"sha384-tH+7JqZsVy7YeQwAMaBy/Atog6AJ09Pq2tC2BObhSJmSREpgSVZimrtzfo8R6vZT\" crossorigin=\"anonymous\"></script>\n<!-- Mapbox draws this map: fill \"tk\" with your Mapbox token. -->\n<doxa-country-map profile-config='{\"profile\":\"country-map\",\"provider\":\"mapbox\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-country-map>"
|
||||
"script": "<!-- MapLibre engine (the default), fetched early -->\n<link rel=\"preload\" as=\"script\" href=\"https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.js\" integrity=\"sha384-5+cfbwT0iiub6VsQAdn6yz16nr6sDiQoHx6tm4O8OVYXHYOxcffFmCJBL0dgdvGp\" crossorigin=\"anonymous\">\n<link rel=\"preload\" as=\"style\" href=\"https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.css\" integrity=\"sha384-uTttxo/aOKbdE5RlD/SPzSDoDmNvGlUYPjONi2MN/b7c9HPSvW07OIuyP7uL6jxK\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./country-map/country-map.js\" integrity=\"sha384-YaehRnXFzeH2+f7y1rI6QCoj9h6xUWvaHGTeMdNsib9jtTY+tA4La2ahH2BxTeA6\" crossorigin=\"anonymous\"></script>\n<!-- MapLibre draws this map and needs no token. For Mapbox, paste this map's embed.scriptMapbox from manifest.json instead: it sets \"provider\":\"mapbox\" and preloads the Mapbox engine; fill \"tk\" with your token. -->\n<doxa-country-map profile-config='{\"profile\":\"country-map\",\"provider\":\"maplibre\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-country-map>",
|
||||
"scriptMapbox": "<!-- Mapbox engine, fetched early -->\n<link rel=\"preload\" as=\"script\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.js\" integrity=\"sha384-tO0clamXONKwbiz7O6xJpUeyJbTSPugC+xM9clvfFvKTH3i8SmCawHGdf5quMWmZ\" crossorigin=\"anonymous\">\n<link rel=\"preload\" as=\"style\" href=\"https://api.mapbox.com/mapbox-gl-js/v3.24.0/mapbox-gl.css\" integrity=\"sha384-rp1X/jJ9MpWPef9OimfXhOaOc4Gzs87yQvF+ajwY6X2H4PTeHNycNlLWiWvj7ehV\" crossorigin=\"anonymous\">\n<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./country-map/country-map.js\" integrity=\"sha384-YaehRnXFzeH2+f7y1rI6QCoj9h6xUWvaHGTeMdNsib9jtTY+tA4La2ahH2BxTeA6\" crossorigin=\"anonymous\"></script>\n<!-- Mapbox draws this map: fill \"tk\" with your Mapbox token. -->\n<doxa-country-map profile-config='{\"profile\":\"country-map\",\"provider\":\"mapbox\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></doxa-country-map>"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in a new issue