u

vite.config.js

@@ -31,10 +31,31 @@ function truncate(text, max = 500) {
   return `${s.slice(0, max)}… (${s.length} chars)`;
 }
 
-function formatLoggedBody(statusCode, body) {
+function isBinaryContentType(contentType = '') {
+  const type = contentType.split(';')[0].trim().toLowerCase();
+  if (!type) return false;
+  if (type.startsWith('image/')) return true;
+  if (type === 'application/octet-stream') return true;
+  return false;
+}
+
+function formatRequestBody(contentType, buffer) {
+  if (!buffer || buffer.length === 0) return '(empty)';
+  if (isBinaryContentType(contentType)) {
+    const type = contentType.split(';')[0].trim();
+    return `(binary ${type}, ${buffer.length} bytes)`;
+  }
+  return truncate(buffer.toString('utf8'));
+}
+
+function formatResponseBody(statusCode, contentType, buffer) {
   if (statusCode === 304) return '(304 no body)';
-  if (statusCode === 204 || body === '') return '(empty)';
-  return truncate(body);
+  if (statusCode === 204 || !buffer || buffer.length === 0) return '(empty)';
+  if (isBinaryContentType(contentType)) {
+    const type = contentType.split(';')[0].trim();
+    return `(binary ${type}, ${buffer.length} bytes)`;
+  }
+  return truncate(buffer.toString('utf8'));
 }
 
 function hasRequestBody(method) {
@@ -57,9 +78,11 @@ const sharedServer = {
           const chunks = [];
           req.on('data', (chunk) => chunks.push(chunk));
           req.on('end', () => {
-            req._proxyRequestBody = chunks.length
-              ? Buffer.concat(chunks).toString('utf8')
-              : '';
+            const buffer = chunks.length ? Buffer.concat(chunks) : null;
+            req._proxyRequestBody = formatRequestBody(
+              req.headers['content-type'] ?? '',
+              buffer,
+            );
           });
         });
 
@@ -75,9 +98,9 @@ const sharedServer = {
           const responseChunks = [];
           proxyRes.on('data', (chunk) => responseChunks.push(chunk));
           proxyRes.on('end', () => {
-            const responseBody = responseChunks.length
-              ? Buffer.concat(responseChunks).toString('utf8')
-              : '';
+            const responseBuffer = responseChunks.length
+              ? Buffer.concat(responseChunks)
+              : null;
             const parts = [
               '[vite-proxy]',
               req.method,
@@ -85,14 +108,16 @@ const sharedServer = {
               String(proxyRes.statusCode),
             ];
             if (hasRequestBody(req.method)) {
-              parts.push(
-                `body=${req._proxyRequestBody ? truncate(req._proxyRequestBody) : '(empty)'}`,
-              );
+              parts.push(`body=${req._proxyRequestBody ?? '(empty)'}`);
             }
             if (cookies?.length) {
               parts.push(`set-cookie=${cookies.map((c) => c.split(';')[0]).join(',')}`);
             }
-            parts.push(formatLoggedBody(proxyRes.statusCode, responseBody));
+            parts.push(formatResponseBody(
+              proxyRes.statusCode,
+              proxyRes.headers['content-type'] ?? '',
+              responseBuffer,
+            ));
             console.log(parts.join(' '));
           });
         });
@@ -115,6 +140,10 @@ export default defineConfig(({ command }) => ({
               name: 'mui-vendor',
               test: /node_modules\/(@mui|@emotion)\//,
             },
+            {
+              name: 'jsquash-image',
+              test: /node_modules\/@jsquash\/(avif|resize)\//,
+            },
           ],
         },
       },
@@ -157,6 +186,7 @@ export default defineConfig(({ command }) => ({
             },
             workbox: {
               globPatterns: ['**/*.{js,css,html,ico,png,svg,webmanifest,woff2}'],
+              globIgnores: ['**/*.wasm'],
               navigateFallback: 'index.html',
               navigateFallbackDenylist: [/^\/api/],
             },