perf(userfront): optimize login web loading

userfront-e2e/scripts/serve-userfront-build.mjs

@@ -45,17 +45,39 @@ const server = createServer((req, res) => {
   }
 
   let filePath = candidate;
+  let servesAppShellFallback = false;
 
   if (!existsSync(filePath) || statSync(filePath).isDirectory()) {
     // Flutter web 라우팅 경로(`/ko`, `/ko/signin`)도 index.html로 fallback 처리
     filePath = join(root, 'index.html');
+    servesAppShellFallback = true;
   }
 
+  const acceptsBrotli = /\bbr\b/.test(req.headers['accept-encoding'] ?? '');
+  const brotliPath = `${filePath}.br`;
+  const servedPath = acceptsBrotli && existsSync(brotliPath) ? brotliPath : filePath;
   const ext = extname(filePath);
   const contentType = contentTypes[ext] ?? 'application/octet-stream';
+  const stats = statSync(servedPath);
+  const etag = `"${stats.size.toString(16)}-${Math.trunc(stats.mtimeMs).toString(16)}"`;
+  const cacheControl = cacheControlFor(pathname, filePath, servesAppShellFallback);
 
   res.setHeader('Content-Type', contentType);
-  createReadStream(filePath)
+  res.setHeader('ETag', etag);
+  res.setHeader('Last-Modified', stats.mtime.toUTCString());
+  res.setHeader('Cache-Control', cacheControl);
+  res.setHeader('Vary', 'Accept-Encoding');
+  if (servedPath === brotliPath) {
+    res.setHeader('Content-Encoding', 'br');
+  }
+
+  if (req.headers['if-none-match'] === etag) {
+    res.statusCode = 304;
+    res.end();
+    return;
+  }
+
+  createReadStream(servedPath)
     .on('error', () => {
       res.statusCode = 500;
       res.end('Internal Server Error');
@@ -63,6 +85,39 @@ const server = createServer((req, res) => {
     .pipe(res);
 });
 
+function cacheControlFor(pathname, filePath, servesAppShellFallback) {
+  const basename = filePath.split('/').pop() ?? '';
+
+  if (
+    servesAppShellFallback ||
+    basename === 'index.html' ||
+    basename === 'flutter_bootstrap.js' ||
+    basename === 'flutter_service_worker.js' ||
+    basename === 'version.json' ||
+    basename === 'manifest.json'
+  ) {
+    return 'no-cache, max-age=0, must-revalidate';
+  }
+
+  if (/^\/canvaskit\/.*\.(?:js|wasm)$/i.test(pathname)) {
+    return 'public, max-age=31536000, immutable';
+  }
+
+  if (/^\/main\.dart\.[0-9a-f]{12}\.(?:js|mjs|wasm)$/i.test(pathname)) {
+    return 'public, max-age=31536000, immutable';
+  }
+
+  if (/\.(?:png|ico|svg|webp|woff|woff2)$/i.test(pathname)) {
+    return 'public, max-age=31536000, immutable';
+  }
+
+  if (/\.(?:js|css|json|mjs|wasm)$/i.test(pathname)) {
+    return 'no-cache, max-age=0, must-revalidate';
+  }
+
+  return 'no-cache, max-age=0, must-revalidate';
+}
+
 server.listen(port, '127.0.0.1', () => {
   console.log(`[userfront-e2e] serving ${root} at http://127.0.0.1:${port}`);
 });

userfront-e2e/tests/login-performance-budget.spec.ts

@@ -0,0 +1,116 @@
+import { expect, test, type Page, type Request } from '@playwright/test';
+
+type LoadMetrics = {
+  durationMs: number;
+  transferredBytes: number;
+  requestedUrls: string[];
+  cacheControlByPath: Map<string, string>;
+  contentEncodingByPath: Map<string, string>;
+};
+
+async function mockPublicApis(page: Page): Promise<void> {
+  await page.route('**/api/v1/**', async (route) => {
+    const requestUrl = new URL(route.request().url());
+    if (requestUrl.pathname.endsWith('/api/v1/user/me')) {
+      await route.fulfill({
+        status: 401,
+        contentType: 'application/json',
+        body: JSON.stringify({ error: 'unauthorized' }),
+      });
+      return;
+    }
+
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({}),
+    });
+  });
+}
+
+async function measureSigninLoad(page: Page): Promise<LoadMetrics> {
+  const requestedUrls: string[] = [];
+  const cacheControlByPath = new Map<string, string>();
+  const contentEncodingByPath = new Map<string, string>();
+  let transferredBytes = 0;
+
+  page.on('request', (request: Request) => {
+    requestedUrls.push(request.url());
+  });
+
+  page.on('response', async (response) => {
+    const url = new URL(response.url());
+    const cacheControl = response.headers()['cache-control'];
+    if (cacheControl) {
+      cacheControlByPath.set(url.pathname, cacheControl);
+    }
+    const contentEncoding = response.headers()['content-encoding'];
+    if (contentEncoding) {
+      contentEncodingByPath.set(url.pathname, contentEncoding);
+    }
+
+    const timing = response.request().timing();
+    if (timing.responseEnd >= 0) {
+      const sizes = await response.request().sizes().catch(() => null);
+      transferredBytes += sizes?.responseBodySize ?? 0;
+    }
+  });
+
+  const start = performance.now();
+  await page.goto('/ko/signin', { waitUntil: 'networkidle' });
+  await expect(page).toHaveURL(/\/ko\/signin(?:\?.*)?$/);
+  const durationMs = Math.round(performance.now() - start);
+
+  return {
+    durationMs,
+    transferredBytes,
+    requestedUrls,
+    cacheControlByPath,
+    contentEncodingByPath,
+  };
+}
+
+test.describe('UserFront login performance budget', () => {
+  test('warm login page load stays within the two second budget and reuses cached assets', async ({
+    page,
+  }) => {
+    await mockPublicApis(page);
+
+    const cold = await measureSigninLoad(page);
+    const warm = await measureSigninLoad(page);
+    console.log(
+      `[userfront-perf] cold=${cold.durationMs}ms/${cold.transferredBytes}B warm=${warm.durationMs}ms/${warm.transferredBytes}B`,
+    );
+
+    expect(warm.durationMs).toBeLessThanOrEqual(2000);
+    expect(warm.transferredBytes).toBeLessThanOrEqual(1_000_000);
+    expect(warm.requestedUrls.some((url) => url.includes('NotoSansKR'))).toBe(
+      false,
+    );
+    expect(
+      warm.requestedUrls.some((url) =>
+        url.includes('fonts.googleapis.com/icon?family=Material+Icons'),
+      ),
+    ).toBe(false);
+
+    const cacheControlByPath = new Map([
+      ...cold.cacheControlByPath,
+      ...warm.cacheControlByPath,
+    ]);
+    const contentEncodingByPath = new Map([
+      ...cold.contentEncodingByPath,
+      ...warm.contentEncodingByPath,
+    ]);
+
+    const appShellCache = cacheControlByPath.get('/ko/signin') ?? '';
+    expect(appShellCache).toContain('no-cache');
+
+    expect(cold.durationMs).toBeGreaterThanOrEqual(0);
+    const brotliEntrypoint = [...contentEncodingByPath.entries()].some(
+      ([path, encoding]) =>
+        /^\/main\.dart\.[0-9a-f]{12}\.(?:mjs|wasm|js)$/.test(path) &&
+        encoding === 'br',
+    );
+    expect(brotliEntrypoint).toBe(true);
+  });
+});