Merge pull request #98 from Pandipipas/optimize-bundle-size-with-webpack

perf: lazy-load scoreboard flag assets

src/graphics/scoreboard/main.vue

@@ -48,35 +48,51 @@ const leftTeam = computed(() => scoreboard.value.leftTeamOverride || '');
 const rightTeam = computed(() => scoreboard.value.rightTeamOverride || '');
 
 const flagModules = import.meta.glob('/node_modules/flag-icons/flags/4x3/*.svg', {
-  eager: true,
   import: 'default',
   query: '?url',
-}) as Record<string, string>;
+}) as Record<string, () => Promise<string>>;
 
-const flagByCode = Object.fromEntries(
-  Object.entries(flagModules)
-    .map(([path, url]) => {
-      const filename = path.split('/').pop();
-      const code = filename?.replace('.svg', '');
-      if (!code) {
-        return null;
-      }
-      return [code.toLowerCase(), url] as const;
-    })
-    .filter((entry): entry is readonly [string, string] => Boolean(entry)),
-);
+const flagUrlCache: Record<string, string> = {};
 
-const getFlagUrl = (country: string | undefined) => {
-  const code = resolveCountryCode(country);
+const leftFlagUrl = ref('');
+const rightFlagUrl = ref('');
+
+const loadFlagUrl = async (country: string | undefined) => {
+  const code = resolveCountryCode(country)?.toLowerCase();
   if (!code) {
     return '';
   }
-  return flagByCode[code.toLowerCase()] ?? '';
+
+  const cached = flagUrlCache[code];
+  if (cached) {
+    return cached;
+  }
+
+  const moduleLoader = flagModules[`/node_modules/flag-icons/flags/4x3/${code}.svg`];
+  if (!moduleLoader) {
+    return '';
+  }
+
+  const url = await moduleLoader();
+  flagUrlCache[code] = url;
+  return url;
 };
 
-const leftFlagUrl = computed(() => getFlagUrl(scoreboard.value.leftCountryOverride));
+watch(
+  () => scoreboard.value.leftCountryOverride,
+  async (country) => {
+    leftFlagUrl.value = await loadFlagUrl(country);
+  },
+  { immediate: true },
+);
 
-const rightFlagUrl = computed(() => getFlagUrl(scoreboard.value.rightCountryOverride));
+watch(
+  () => scoreboard.value.rightCountryOverride,
+  async (country) => {
+    rightFlagUrl.value = await loadFlagUrl(country);
+  },
+  { immediate: true },
+);
 
 const roundText = computed(() => scoreboard.value.round || 'Round');