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}`);
 });