Merge pull request #374 from temma02/feature/issue-46-performance-optimization

perf(ui): code splitting, lazy loading, caching, and performance monitoring

Author: Mystery-CLI

client/src/lib/api/client.ts

@@ -1,5 +1,29 @@
 import { ApiRequestError } from './types';
 
+// ---------------------------------------------------------------------------
+// Simple in-memory GET cache with TTL
+// ---------------------------------------------------------------------------
+interface CacheEntry { value: unknown; expiresAt: number }
+const cache = new Map<string, CacheEntry>();
+
+export function cachedFetch<T>(
+  key: string,
+  ttlMs: number,
+  fetcher: () => Promise<T>
+): Promise<T> {
+  const hit = cache.get(key);
+  if (hit && Date.now() < hit.expiresAt) return Promise.resolve(hit.value as T);
+  return fetcher().then((value) => {
+    cache.set(key, { value, expiresAt: Date.now() + ttlMs });
+    return value;
+  });
+}
+
+export function invalidateCache(prefix?: string) {
+  if (!prefix) { cache.clear(); return; }
+  for (const key of cache.keys()) if (key.startsWith(prefix)) cache.delete(key);
+}
+
 const RETRY_STATUSES = new Set([429, 502, 503, 504]);
 const DEFAULT_RETRIES = 3;
 const BASE_DELAY_MS = 300;

client/src/lib/api/index.ts

@@ -26,5 +26,6 @@ const config: ClientConfig = {
 export const indexerApi = USE_MOCK ? mockIndexerApi : createIndexerApi(config);
 
 export { ApiRequestError } from './types';
+export { invalidateCache } from './client';
 export type { Event, PagedResponse, TradeSearchResult, UserSearchResult, SearchSuggestion } from './types';
 export type { IndexerApi } from './indexer';

client/src/lib/api/indexer.ts

@@ -1,4 +1,4 @@
-import { apiFetch, type ClientConfig } from './client';
+import { apiFetch, cachedFetch, type ClientConfig } from './client';
 import type { Event, PagedResponse, TradeSearchResult, UserSearchResult, SearchSuggestion } from './types';
 
 export function createIndexerApi(config: ClientConfig) {
@@ -19,17 +19,18 @@ export function createIndexerApi(config: ClientConfig) {
           .filter(([, v]) => v !== undefined)
           .map(([k, v]) => [k, String(v)])
       ).toString();
-      return get(`/events${qs ? `?${qs}` : ''}`);
+      const path = `/events${qs ? `?${qs}` : ''}`;
+      return cachedFetch(path, 30_000, () => get(path));
     },
 
     /** GET /events/:id */
     getEvent(id: string): Promise<Event> {
-      return get(`/events/${id}`);
+      return cachedFetch(`/events/${id}`, 60_000, () => get(`/events/${id}`));
     },
 
     /** GET /events/trade/:trade_id */
     getTradeEvents(tradeId: number): Promise<Event[]> {
-      return get(`/events/trade/${tradeId}`);
+      return cachedFetch(`/events/trade/${tradeId}`, 30_000, () => get(`/events/trade/${tradeId}`));
     },
 
     /** GET /search/trades */

client/src/lib/perf.ts

@@ -0,0 +1,66 @@
+import { browser } from '$app/environment';
+
+export interface Metric { name: string; value: number; rating: 'good' | 'needs-improvement' | 'poor' }
+
+const thresholds: Record<string, [number, number]> = {
+  LCP: [2500, 4000],
+  FID: [100, 300],
+  CLS: [0.1, 0.25],
+  FCP: [1800, 3000],
+  TTFB: [800, 1800],
+};
+
+function rate(name: string, value: number): Metric['rating'] {
+  const [good, poor] = thresholds[name] ?? [Infinity, Infinity];
+  return value <= good ? 'good' : value <= poor ? 'needs-improvement' : 'poor';
+}
+
+/** Collect Web Vitals via PerformanceObserver and report via callback */
+export function collectWebVitals(onMetric: (m: Metric) => void) {
+  if (!browser || !('PerformanceObserver' in window)) return;
+
+  observe('largest-contentful-paint', (entries) => {
+    const e = entries.at(-1) as PerformanceEntry & { renderTime?: number; loadTime?: number };
+    const value = (e.renderTime || e.loadTime) ?? 0;
+    onMetric({ name: 'LCP', value, rating: rate('LCP', value) });
+  });
+
+  observe('first-input', (entries) => {
+    const e = entries[0] as PerformanceEntry & { processingStart: number };
+    const value = e.processingStart - e.startTime;
+    onMetric({ name: 'FID', value, rating: rate('FID', value) });
+  });
+
+  let clsValue = 0;
+  observe('layout-shift', (entries) => {
+    for (const e of entries as (PerformanceEntry & { hadRecentInput: boolean; value: number })[]) {
+      if (!e.hadRecentInput) clsValue += e.value;
+    }
+    onMetric({ name: 'CLS', value: clsValue, rating: rate('CLS', clsValue) });
+  });
+
+  observe('paint', (entries) => {
+    const fcp = entries.find((e) => e.name === 'first-contentful-paint');
+    if (fcp) onMetric({ name: 'FCP', value: fcp.startTime, rating: rate('FCP', fcp.startTime) });
+  });
+
+  observe('navigation', (entries) => {
+    const e = entries[0] as PerformanceNavigationTiming;
+    const value = e.responseStart - e.requestStart;
+    onMetric({ name: 'TTFB', value, rating: rate('TTFB', value) });
+  });
+}
+
+function observe(type: string, cb: (entries: PerformanceEntry[]) => void) {
+  try {
+    new PerformanceObserver((list) => cb(list.getEntries())).observe({ type, buffered: true });
+  } catch { /* unsupported entry type */ }
+}
+
+/** Measure an async operation and log duration in dev */
+export async function measure<T>(label: string, fn: () => Promise<T>): Promise<T> {
+  const start = performance.now();
+  const result = await fn();
+  if (import.meta.env.DEV) console.debug(`[perf] ${label}: ${(performance.now() - start).toFixed(1)}ms`);
+  return result;
+}

client/src/routes/+layout.svelte

@@ -5,8 +5,15 @@
   import ThemeToggle from '$lib/ThemeToggle.svelte';
   import SearchBar from '$lib/SearchBar.svelte';
   import OfflineIndicator from '$lib/OfflineIndicator.svelte';
+  import { collectWebVitals } from '$lib/perf';
 
-  onMount(() => themeStore.init());
+  onMount(() => {
+    themeStore.init();
+    collectWebVitals((m) => {
+      // In production, forward to your analytics endpoint here
+      if (import.meta.env.DEV) console.info(`[vitals] ${m.name}: ${m.value.toFixed(1)} (${m.rating})`);
+    });
+  });
 </script>
 
 <div class="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">

client/src/routes/+layout.ts

@@ -0,0 +1,4 @@
+// Enable client-side navigation with preloading on hover/tap (SvelteKit default is 'hover').
+// Setting preloadingStrategy here makes it explicit and easy to tune.
+export const prerender = false;
+export const ssr = false; // SPA mode — all routes are client-side only

client/src/routes/trades/[id]/+page.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from './$types';
+import { indexerApi } from '$lib/api';
+
+// Preload trade events alongside the route chunk so the page renders with data immediately
+export const load: PageLoad = async ({ params }) => {
+  const tradeId = parseInt(params.id);
+  const events = await indexerApi.getTradeEvents(tradeId).catch(() => []);
+  return { tradeId, events };
+};

client/vite.config.ts

@@ -21,11 +21,9 @@ export default defineConfig({
         ]
       },
       workbox: {
-        // Cache app shell + static assets
         globPatterns: ['**/*.{js,css,html,svg,png,ico,woff2}'],
         runtimeCaching: [
           {
-            // Cache API responses (indexer) with network-first strategy
             urlPattern: ({ url }) => url.pathname.startsWith('/events') || url.pathname.startsWith('/search'),
             handler: 'NetworkFirst',
             options: {
@@ -37,5 +35,24 @@ export default defineConfig({
         ]
       }
     })
-  ]
+  ],
+
+  build: {
+    // Raise chunk warning threshold to 600kb (stellar-sdk is large)
+    chunkSizeWarningLimit: 600,
+    rollupOptions: {
+      output: {
+        // Manual code splitting: vendor libs into separate chunks
+        manualChunks(id) {
+          if (id.includes('node_modules/@stellar')) return 'stellar-sdk';
+          if (id.includes('node_modules')) return 'vendor';
+        }
+      }
+    }
+  },
+
+  // Aggressive dependency pre-bundling for faster dev cold starts
+  optimizeDeps: {
+    include: ['@stellar/stellar-sdk']
+  }
 });