perf(storybook): improve deployed build performance

.gitattributes

@@ -1,3 +1,6 @@
 *.ts whitespace=blank-at-eol,blank-at-eof,space-before-tab,cr-at-eol
 *.tsx whitespace=blank-at-eol,blank-at-eof,space-before-tab,cr-at-eol
 *.css whitespace=blank-at-eol,blank-at-eof,space-before-tab,cr-at-eol
+*.js whitespace=blank-at-eol,blank-at-eof,space-before-tab,cr-at-eol
+*.mjs whitespace=blank-at-eol,blank-at-eof,space-before-tab,cr-at-eol
+*.json whitespace=blank-at-eol,blank-at-eof,space-before-tab,cr-at-eol

.storybook/main.ts

@@ -43,20 +43,14 @@ const config: StorybookConfig = {
       cache: false,
       build: {
         rollupOptions: {
-          treeshake: false,
           output: {
-            assetFileNames: (assetInfo: { name?: string }) => {
-              if (assetInfo.name?.includes('preview') && assetInfo.name?.endsWith('.css')) {
-                return 'assets/preview.css';
-              }
-              return assetInfo.name ? `assets/${assetInfo.name}` : 'assets/[name].[hash][extname]';
-            }
+            assetFileNames: 'assets/[name]-[hash][extname]'
           }
         }
       },
       css: {
         preprocessorOptions: {
-          postcss: true // Asegúrate de que PostCSS esté habilitado
+          postcss: true // Ensure PostCSS stays enabled for Storybook styles.
         }
       }
     });

.storybook/preview-head.html

@@ -1,3 +1,2 @@
 <title>@egdev6 Design System</title>
 <link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
-<link href="../src/styles/global.css" rel="stylesheet">

netlify.toml

@@ -1,3 +1,27 @@
 [build]
   command = "pnpm run storybook-build"
-  publish = "storybook-static"
+  publish = "storybook-static"
+
+[[headers]]
+  for = "/"
+
+  [headers.values]
+    Cache-Control = "public, max-age=0, must-revalidate"
+
+[[headers]]
+  for = "/index.html"
+
+  [headers.values]
+    Cache-Control = "public, max-age=0, must-revalidate"
+
+[[headers]]
+  for = "/iframe.html"
+
+  [headers.values]
+    Cache-Control = "public, max-age=0, must-revalidate"
+
+[[headers]]
+  for = "/assets/*"
+
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"

package.json

@@ -27,6 +27,7 @@
     "biome-staged": "biome check --write --no-errors-on-unmatched --files-ignore-unknown=true",
     "storybook": "storybook dev -p 6006",
     "storybook-build": "storybook build && node scripts/inject-preview-head.js",
+    "storybook-report": "node scripts/report-storybook-build.mjs",
     "storybook-clean-cache": "node -e \"require('fs').rmSync('node_modules/.cache/storybook',{recursive:true,force:true})\"",
     "pre-commit": "pnpm run biome-staged && tsc",
     "test": "vitest run",

scripts/inject-preview-head.js

@@ -37,14 +37,12 @@ if (previewHeadContent) {
   indexContent = indexContent.replace(/<link rel="icon".*?>/g, '');
   indexContent = indexContent.replace(/@font-face {[^}]*?Nunito Sans[^}]*?}/g, '');
 
-  // Inject the preview-head.html contents into the index.html head.
+  // Inject the preview-head.html metadata into the index.html head.
   const updatedIndexContent = indexContent.replace('</head>', `${previewHeadContent}\n</head>`);
 
   // Write the changes to index.html.
   fs.writeFileSync(indexPath, updatedIndexContent, 'utf-8');
-  console.log(
-    'Styles from preview-head.html and captured CSS link have been injected into index.html, and unwanted content has been removed.'
-  );
+  console.log('Injected preview-head metadata into index.html and removed Storybook default head entries.');
 
   // Read the contents of iframe.html.
   let iframeContent = fs.readFileSync(iframePath, 'utf-8');
@@ -55,9 +53,7 @@ if (previewHeadContent) {
   // Write the changes to iframe.html.
   const updatedIframeContent = iframeContent;
   fs.writeFileSync(iframePath, updatedIframeContent, 'utf-8');
-  console.log(
-    'Styles from preview-head.html have been injected into iframe.html, and unwanted content has been removed.'
-  );
+  console.log('Normalized iframe.html head entries after Storybook build.');
 } else {
-  console.warn('preview-head.html not found or is empty. No changes made to index.html.');
+  console.warn('preview-head.html not found or empty. Skipped index.html metadata injection.');
 }

scripts/report-storybook-build.mjs

@@ -0,0 +1,69 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+const outputDir = path.resolve(process.cwd(), process.argv[2] ?? 'storybook-static');
+
+if (!fs.existsSync(outputDir)) {
+  console.error(`Storybook output directory not found: ${outputDir}`);
+  process.exit(1);
+}
+
+const formatBytes = (bytes) => {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+
+  const units = ['KiB', 'MiB', 'GiB'];
+  let value = bytes;
+  let unitIndex = -1;
+
+  do {
+    value /= 1024;
+    unitIndex += 1;
+  } while (value >= 1024 && unitIndex < units.length - 1);
+
+  return `${value.toFixed(value >= 10 ? 1 : 2)} ${units[unitIndex]}`;
+};
+
+const walk = (dir) => {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  return entries.flatMap((entry) => {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      return walk(fullPath);
+    }
+
+    return [fullPath];
+  });
+};
+
+const files = walk(outputDir).map((fullPath) => {
+  const stats = fs.statSync(fullPath);
+
+  return {
+    fullPath,
+    relativePath: path.relative(outputDir, fullPath),
+    size: stats.size
+  };
+});
+
+const totalBytes = files.reduce((sum, file) => sum + file.size, 0);
+const jsFiles = files.filter((file) => file.relativePath.endsWith('.js'));
+const jsBytes = jsFiles.reduce((sum, file) => sum + file.size, 0);
+const topAssets = files
+  .filter((file) => file.relativePath.startsWith('assets/'))
+  .sort((a, b) => b.size - a.size)
+  .slice(0, 10);
+
+console.log('Storybook build report');
+console.log(`Directory: ${outputDir}`);
+console.log(`Total size: ${formatBytes(totalBytes)} (${totalBytes} bytes)`);
+console.log(`JavaScript files: ${jsFiles.length}`);
+console.log(`Raw JavaScript size: ${formatBytes(jsBytes)} (${jsBytes} bytes)`);
+console.log('Top assets:');
+
+for (const asset of topAssets) {
+  console.log(`- ${formatBytes(asset.size)}  ${asset.relativePath}`);
+}