@wular/pnext 0.0.3 → 0.0.6

package/src/cli/analyze.ts

@@ -1,86 +1,92 @@
-import { existsSync } from 'node:fs';
-import { readFile } from 'node:fs/promises';
-import path from 'node:path';
-import zlib from 'node:zlib';
-import { loadConfig } from '../config';
-import { matchRoute } from '../routing/routes';
-import { listFiles } from '../utils/fs';
-import type { BuildManifest, RouteManifestEntry } from '../types';
+import { existsSync } from 'node:fs'
+import { readFile } from 'node:fs/promises'
+import path from 'node:path'
+import zlib from 'node:zlib'
+import { loadConfig } from '../config'
+import { matchRoute } from '../routing/routes'
+import { bold, cyan, dim } from '../utils/ansi'
+import { listFiles } from '../utils/fs'
+import type { BuildManifest, RouteManifestEntry } from '../types'
 
 export interface AnalyzeResult {
-  mode: 'production' | 'development';
-  root: string;
-  compression: AnalyzeCompression;
-  files: AnalyzeFile[];
-  routeBundles: AnalyzeRouteBundle[];
+  mode: 'production' | 'development'
+  root: string
+  compression: AnalyzeCompression
+  files: AnalyzeFile[]
+  routeBundles: AnalyzeRouteBundle[]
   totals: {
-    rawBytes: number;
-    compressedBytes: number;
-  };
+    rawBytes: number
+    compressedBytes: number
+  }
 }
 
 export interface AnalyzeFile {
-  path: string;
-  type: 'html' | 'css' | 'js' | 'asset';
-  rawBytes: number;
-  compressedBytes: number;
+  path: string
+  type: 'html' | 'css' | 'js' | 'asset'
+  rawBytes: number
+  compressedBytes: number
 }
 
 export interface AnalyzeRouteBundle {
-  route: string;
-  page: 'server' | 'client';
-  initial: AnalyzeBundleFile[];
-  visibleDynamic: AnalyzeDynamicBundleFile[];
-  dynamic: AnalyzeDynamicBundleFile[];
-  lazyShared: AnalyzeBundleFile[];
+  route: string
+  page: 'server' | 'client'
+  initial: AnalyzeBundleFile[]
+  visibleDynamic: AnalyzeDynamicBundleFile[]
+  dynamic: AnalyzeDynamicBundleFile[]
+  lazyShared: AnalyzeBundleFile[]
 }
 
 export interface AnalyzeBundleFile {
-  path: string;
-  rawBytes: number;
-  compressedBytes: number;
+  path: string
+  rawBytes: number
+  compressedBytes: number
 }
 
 export interface AnalyzeDynamicBundleFile extends AnalyzeBundleFile {
-  exportName: string;
-  load: 'render' | 'visible';
+  exportName: string
+  load: 'render' | 'visible'
 }
 
-export type AnalyzeCompression = 'gzip' | 'brotli';
+export type AnalyzeCompression = 'gzip' | 'brotli'
 
 interface AnalyzeOptions {
-  compression?: AnalyzeCompression;
-  route?: string;
+  compression?: AnalyzeCompression
+  route?: string
 }
 
-export async function analyzeProject(root?: string, options: AnalyzeOptions = {}): Promise<AnalyzeResult> {
-  const config = await loadConfig(root);
+export async function analyzeProject(
+  root?: string,
+  options: AnalyzeOptions = {},
+): Promise<AnalyzeResult> {
+  const config = await loadConfig(root)
   if (!existsSync(config.outPath)) {
-    throw new Error(`No PNext output found at ${config.outPath}. Run pnext build first.`);
+    throw new Error(`No PNext output found at ${config.outPath}. Run pnext build first.`)
   }
 
-  const target = analyzeTarget(config.outPath);
+  const target = analyzeTarget(config.outPath)
   if (!target) {
-    throw new Error(`No PNext build or dev output found at ${config.outPath}. Run pnext build or pnext dev first.`);
+    throw new Error(
+      `No PNext build or dev output found at ${config.outPath}. Run pnext build or pnext dev first.`,
+    )
   }
 
-  const compression = options.compression ?? 'gzip';
-  const files = await listFiles(target.root);
+  const compression = options.compression ?? 'gzip'
+  const files = await listFiles(target.root)
   const rows = await Promise.all(
     files.map(async file => {
-      const bytes = await readFile(file);
+      const bytes = await readFile(file)
       return {
         path: path.relative(target.root, file),
         type: fileType(file),
         rawBytes: bytes.length,
         compressedBytes: compressedSize(bytes, compression),
-      };
+      }
     }),
-  );
+  )
   const routeBundles =
     target.mode === 'production'
       ? await analyzeRouteBundles(config.outPath, target.root, rows, options.route)
-      : [];
+      : []
 
   return {
     mode: target.mode,
@@ -95,7 +101,7 @@ export async function analyzeProject(root?: string, options: AnalyzeOptions = {}
       }),
       { rawBytes: 0, compressedBytes: 0 },
     ),
-  };
+  }
 }
 
 async function analyzeRouteBundles(
@@ -104,51 +110,51 @@ async function analyzeRouteBundles(
   files: AnalyzeFile[],
   routeFilter?: string,
 ) {
-  const manifestPath = path.join(outPath, 'manifest.json');
-  if (!existsSync(manifestPath)) return [];
+  const manifestPath = path.join(outPath, 'manifest.json')
+  if (!existsSync(manifestPath)) return []
 
-  const manifest = JSON.parse(await readFile(manifestPath, 'utf8')) as BuildManifest;
-  const pages = manifest.routes.filter(route => route.kind === 'page');
-  const selected = routeFilter ? filterAnalyzeRoutes(pages, routeFilter) : pages;
+  const manifest = JSON.parse(await readFile(manifestPath, 'utf8')) as BuildManifest
+  const pages = manifest.routes.filter(route => route.kind === 'page')
+  const selected = routeFilter ? filterAnalyzeRoutes(pages, routeFilter) : pages
   if (routeFilter && selected.length === 0) {
     throw new Error(
       `No route matches ${routeFilter}. Routes:\n  ${pages
         .map(route => publicRoutePath(route.route))
         .join('\n  ')}`,
-    );
+    )
   }
-  const sizes = new Map(files.map(file => [toPosix(file.path), file]));
-  const contents = new Map<string, string>();
+  const sizes = new Map(files.map(file => [toPosix(file.path), file]))
+  const contents = new Map<string, string>()
 
   async function js(pathname: string) {
-    const normalized = toPosix(pathname);
-    if (contents.has(normalized)) return contents.get(normalized) ?? '';
-    const text = await readFile(path.join(publicPath, normalized), 'utf8');
-    contents.set(normalized, text);
-    return text;
+    const normalized = toPosix(pathname)
+    if (contents.has(normalized)) return contents.get(normalized) ?? ''
+    const text = await readFile(path.join(publicPath, normalized), 'utf8')
+    contents.set(normalized, text)
+    return text
   }
 
-  const bundles: AnalyzeRouteBundle[] = [];
+  const bundles: AnalyzeRouteBundle[] = []
   for (const route of selected) {
-    bundles.push(await analyzeRouteBundle(route, sizes, js));
+    bundles.push(await analyzeRouteBundle(route, sizes, js))
   }
-  return bundles;
+  return bundles
 }
 
 // Accepts the route in ':id' or '[id]' template form, or a concrete pathname
 // (e.g. /users/ada) matched through the route patterns.
 function filterAnalyzeRoutes(pages: RouteManifestEntry[], filter: string) {
-  const normalized = filter === '/' ? filter : filter.replace(/\/+$/, '');
+  const normalized = filter === '/' ? filter : filter.replace(/\/+$/, '')
   const direct = pages.filter(
     route => route.route === normalized || publicRoutePath(route.route) === normalized,
-  );
-  if (direct.length > 0) return direct;
-  const matched = matchRoute(pages, normalized);
-  return matched ? [matched.route] : [];
+  )
+  if (direct.length > 0) return direct
+  const matched = matchRoute(pages, normalized)
+  return matched ? [matched.route] : []
 }
 
 function publicRoutePath(route: string) {
-  return route.replace(/:([a-zA-Z0-9_]+)\*/g, '[...$1]').replace(/:([a-zA-Z0-9_]+)/g, '[$1]');
+  return route.replace(/:([a-zA-Z0-9_]+)\*/g, '[...$1]').replace(/:([a-zA-Z0-9_]+)/g, '[$1]')
 }
 
 async function analyzeRouteBundle(
@@ -156,51 +162,52 @@ async function analyzeRouteBundle(
   sizes: Map<string, AnalyzeFile>,
   js: (path: string) => Promise<string>,
 ): Promise<AnalyzeRouteBundle> {
-  const initial = new Set<string>();
-  addIfExists(initial, sizes, routeHtmlPath(route));
-  addIfExists(initial, sizes, 'assets/global.css');
-  addIfExists(initial, sizes, `assets/${route.id}.css`);
+  const initial = new Set<string>()
+  addIfExists(initial, sizes, routeHtmlPath(route))
+  addIfExists(initial, sizes, 'assets/global.css')
+  addIfExists(initial, sizes, `assets/${route.id}.css`)
 
   if (route.clientEntry) {
-    addIfExists(initial, sizes, route.clientEntry);
-    for (const dependency of await staticDependencies(route.clientEntry, sizes, js)) initial.add(dependency);
+    addIfExists(initial, sizes, route.clientEntry)
+    for (const dependency of await staticDependencies(route.clientEntry, sizes, js))
+      initial.add(dependency)
   }
 
-  const visibleDynamic: AnalyzeDynamicBundleFile[] = [];
-  const dynamic: AnalyzeDynamicBundleFile[] = [];
-  const dynamicTargets = new Set<string>();
-  const lazyShared = new Set<string>();
+  const visibleDynamic: AnalyzeDynamicBundleFile[] = []
+  const dynamic: AnalyzeDynamicBundleFile[] = []
+  const dynamicTargets = new Set<string>()
+  const lazyShared = new Set<string>()
 
   if (route.clientEntry && sizes.has(toPosix(route.clientEntry))) {
-    const entrySource = await js(route.clientEntry);
-    const imports = dynamicImports(entrySource, route.clientEntry);
+    const entrySource = await js(route.clientEntry)
+    const imports = dynamicImports(entrySource, route.clientEntry)
     for (const imported of imports) {
-      const reference = route.clientReferences.find(item => item.exportName === imported.exportName);
+      const reference = route.clientReferences.find(item => item.exportName === imported.exportName)
       const load: AnalyzeDynamicBundleFile['load'] =
-        reference?.dynamic?.load === 'visible' ? 'visible' : 'render';
-      const row = sizes.get(imported.path);
-      if (!row) continue;
-      dynamicTargets.add(imported.path);
+        reference?.dynamic?.load === 'visible' ? 'visible' : 'render'
+      const row = sizes.get(imported.path)
+      if (!row) continue
+      dynamicTargets.add(imported.path)
       const item: AnalyzeDynamicBundleFile = {
         path: imported.path,
         exportName: imported.exportName,
         load,
         rawBytes: row.rawBytes,
         compressedBytes: row.compressedBytes,
-      };
-      if (load === 'visible') visibleDynamic.push(item);
-      else dynamic.push(item);
+      }
+      if (load === 'visible') visibleDynamic.push(item)
+      else dynamic.push(item)
 
       for (const dependency of await staticDependencies(imported.path, sizes, js)) {
-        if (!initial.has(dependency) && !dynamicTargets.has(dependency)) lazyShared.add(dependency);
+        if (!initial.has(dependency) && !dynamicTargets.has(dependency)) lazyShared.add(dependency)
       }
     }
 
     for (const importedPath of dynamicImportPaths(entrySource, route.clientEntry)) {
-      if (initial.has(importedPath) || dynamicTargets.has(importedPath)) continue;
-      if (sizes.has(importedPath)) lazyShared.add(importedPath);
+      if (initial.has(importedPath) || dynamicTargets.has(importedPath)) continue
+      if (sizes.has(importedPath)) lazyShared.add(importedPath)
       for (const dependency of await staticDependencies(importedPath, sizes, js)) {
-        if (!initial.has(dependency) && !dynamicTargets.has(dependency)) lazyShared.add(dependency);
+        if (!initial.has(dependency) && !dynamicTargets.has(dependency)) lazyShared.add(dependency)
       }
     }
   }
@@ -212,7 +219,7 @@ async function analyzeRouteBundle(
     visibleDynamic: visibleDynamic.sort((a, b) => b.compressedBytes - a.compressedBytes),
     dynamic: dynamic.sort((a, b) => b.compressedBytes - a.compressedBytes),
     lazyShared: bundleFiles([...lazyShared], sizes),
-  };
+  }
 }
 
 async function staticDependencies(
@@ -221,108 +228,290 @@ async function staticDependencies(
   js: (path: string) => Promise<string>,
   seen = new Set<string>(),
 ) {
-  const dependencies = new Set<string>();
-  const normalized = toPosix(entry);
-  if (seen.has(normalized) || !sizes.has(normalized)) return dependencies;
-  seen.add(normalized);
+  const dependencies = new Set<string>()
+  const normalized = toPosix(entry)
+  if (seen.has(normalized) || !sizes.has(normalized)) return dependencies
+  seen.add(normalized)
 
   for (const specifier of staticImports(await js(normalized))) {
-    const dependency = resolveBuiltImport(normalized, specifier);
-    if (!dependency || !sizes.has(dependency)) continue;
-    dependencies.add(dependency);
-    for (const transitive of await staticDependencies(dependency, sizes, js, seen)) dependencies.add(transitive);
+    const dependency = resolveBuiltImport(normalized, specifier)
+    if (!dependency || !sizes.has(dependency)) continue
+    dependencies.add(dependency)
+    for (const transitive of await staticDependencies(dependency, sizes, js, seen))
+      dependencies.add(transitive)
   }
 
-  return dependencies;
+  return dependencies
 }
 
 function dynamicImports(source: string, from: string) {
-  const imports: { path: string; exportName: string }[] = [];
-  const pattern = /import\("([^"]+)"\)\.then\([A-Za-z_$][\w$]*=>[A-Za-z_$][\w$]*\.([A-Za-z_$][\w$]*)\)/g;
-  let match: RegExpExecArray | null;
+  const imports: { path: string; exportName: string }[] = []
+  const pattern =
+    /import\("([^"]+)"\)\.then\([A-Za-z_$][\w$]*=>[A-Za-z_$][\w$]*\.([A-Za-z_$][\w$]*)\)/g
+  let match: RegExpExecArray | null
   while ((match = pattern.exec(source))) {
-    const specifier = match[1];
-    const exportName = match[2];
-    if (!specifier || !exportName) continue;
-    const resolved = resolveBuiltImport(from, specifier);
-    if (resolved) imports.push({ path: resolved, exportName });
+    const specifier = match[1]
+    const exportName = match[2]
+    if (!specifier || !exportName) continue
+    const resolved = resolveBuiltImport(from, specifier)
+    if (resolved) imports.push({ path: resolved, exportName })
   }
-  return imports;
+  return imports
 }
 
 function dynamicImportPaths(source: string, from: string) {
-  const imports: string[] = [];
-  const pattern = /import\("([^"]+)"\)/g;
-  let match: RegExpExecArray | null;
+  const imports: string[] = []
+  const pattern = /import\("([^"]+)"\)/g
+  let match: RegExpExecArray | null
   while ((match = pattern.exec(source))) {
-    const specifier = match[1];
-    if (!specifier) continue;
-    const resolved = resolveBuiltImport(from, specifier);
-    if (resolved) imports.push(resolved);
+    const specifier = match[1]
+    if (!specifier) continue
+    const resolved = resolveBuiltImport(from, specifier)
+    if (resolved) imports.push(resolved)
   }
-  return imports;
+  return imports
 }
 
 function staticImports(source: string) {
-  const imports: string[] = [];
-  const pattern = /import\s*(?:[^'"]*?from\s*)?["']([^'"]+)["']/g;
-  let match: RegExpExecArray | null;
+  const imports: string[] = []
+  const pattern = /import\s*(?:[^'"]*?from\s*)?["']([^'"]+)["']/g
+  let match: RegExpExecArray | null
   while ((match = pattern.exec(source))) {
-    if (match[1]) imports.push(match[1]);
+    if (match[1]) imports.push(match[1])
   }
-  return imports;
+  return imports
 }
 
 function resolveBuiltImport(from: string, specifier: string) {
-  if (!specifier.startsWith('.')) return null;
-  return toPosix(path.posix.normalize(path.posix.join(path.posix.dirname(toPosix(from)), specifier)));
+  if (!specifier.startsWith('.')) return null
+  return toPosix(
+    path.posix.normalize(path.posix.join(path.posix.dirname(toPosix(from)), specifier)),
+  )
 }
 
 function addIfExists(items: Set<string>, sizes: Map<string, AnalyzeFile>, pathname: string) {
-  const normalized = toPosix(pathname);
-  if (sizes.has(normalized)) items.add(normalized);
+  const normalized = toPosix(pathname)
+  if (sizes.has(normalized)) items.add(normalized)
 }
 
 function bundleFiles(paths: string[], sizes: Map<string, AnalyzeFile>) {
   return paths
     .map(pathname => {
-      const row = sizes.get(pathname);
-      return row ? { path: pathname, rawBytes: row.rawBytes, compressedBytes: row.compressedBytes } : null;
+      const row = sizes.get(pathname)
+      return row
+        ? { path: pathname, rawBytes: row.rawBytes, compressedBytes: row.compressedBytes }
+        : null
     })
     .filter((file): file is AnalyzeBundleFile => Boolean(file))
-    .sort((a, b) => b.compressedBytes - a.compressedBytes);
+    .sort((a, b) => b.compressedBytes - a.compressedBytes)
 }
 
 function routeHtmlPath(route: RouteManifestEntry) {
-  return route.route === '/' ? 'index.html' : `${route.route.replace(/^\/+/, '')}/index.html`;
+  return route.route === '/' ? 'index.html' : `${route.route.replace(/^\/+/, '')}/index.html`
 }
 
 function analyzeTarget(outPath: string) {
-  const publicPath = path.join(outPath, 'public');
-  if (existsSync(publicPath)) return { mode: 'production' as const, root: publicPath };
+  const publicPath = path.join(outPath, 'public')
+  if (existsSync(publicPath)) return { mode: 'production' as const, root: publicPath }
 
-  const cachePath = path.join(outPath, 'cache');
-  if (existsSync(cachePath)) return { mode: 'development' as const, root: cachePath };
+  const cachePath = path.join(outPath, 'cache')
+  if (existsSync(cachePath)) return { mode: 'development' as const, root: cachePath }
 
-  return null;
+  return null
 }
 
 function compressedSize(bytes: Buffer, compression: AnalyzeCompression) {
   if (compression === 'brotli') {
     return zlib.brotliCompressSync(bytes, {
       params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 },
-    }).length;
+    }).length
   }
-  return zlib.gzipSync(bytes, { level: 9 }).length;
+  return zlib.gzipSync(bytes, { level: 9 }).length
 }
 
 function fileType(file: string): 'html' | 'css' | 'js' | 'asset' {
-  if (file.endsWith('.html')) return 'html';
-  if (file.endsWith('.css')) return 'css';
-  if (file.endsWith('.js')) return 'js';
-  return 'asset';
+  if (file.endsWith('.html')) return 'html'
+  if (file.endsWith('.css')) return 'css'
+  if (file.endsWith('.js')) return 'js'
+  return 'asset'
 }
 
 function toPosix(value: string) {
-  return value.split(path.sep).join('/');
+  return value.split(path.sep).join('/')
+}
+
+export function printAnalyzeResult(
+  result: AnalyzeResult,
+  options: { route?: string; files: boolean },
+) {
+  console.log(
+    `PNext analyze: ${result.mode === 'production' ? 'production build' : 'dev server cache'} at ${dim(result.root)} (${result.compression})`,
+  )
+  printRouteBundles(result)
+  // With a route filter, the remaining files are mostly other routes' bundles —
+  // listing them as "other" would misread as unowned weight.
+  if (!options.route) printAnalyzeFiles(result, { details: options.files })
+}
+
+function printRouteBundles(result: AnalyzeResult) {
+  if (result.routeBundles.length === 0) return
+
+  console.log(`\n${bold('Routes')}`)
+  for (const bundle of result.routeBundles) {
+    console.log(`\n${cyan(bundle.route)} ${dim(`(${bundle.page} page)`)}`)
+    printBundleGroup('initial', bundle.initial, result.compression)
+    printDynamicBundleGroup('visible dynamic', bundle.visibleDynamic, result.compression)
+    printDynamicBundleGroup('dynamic', bundle.dynamic, result.compression)
+    printBundleGroup('shared after dynamic', bundle.lazyShared, result.compression)
+  }
+  console.log('')
+}
+
+function printBundleGroup(
+  label: string,
+  files: AnalyzeResult['routeBundles'][number]['initial'],
+  compression: AnalyzeCompression,
+) {
+  if (files.length === 0) return
+  console.log(`\n  ${bold(label.padEnd(22))} ${formatTotalSize(files, compression)}`)
+  printBundleFiles(files, compression, '    ', rowColumns(files))
+}
+
+function printDynamicBundleGroup(
+  label: string,
+  files: AnalyzeResult['routeBundles'][number]['visibleDynamic'],
+  compression: AnalyzeCompression,
+) {
+  if (files.length === 0) return
+  console.log(`\n  ${bold(label)}`)
+  const columns = rowColumns(files)
+  const componentWidth = Math.max(...files.map(file => file.exportName.length))
+  const pathWidth = Math.max(...files.map(file => file.path.length))
+  for (const file of files) {
+    console.log(
+      `    ${file.exportName.padEnd(componentWidth)}  ${dim(file.path.padEnd(pathWidth))}  ${formatFileSize(file, compression, columns)}`,
+    )
+  }
+}
+
+function formatTotalSize(
+  files: { rawBytes: number; compressedBytes: number }[],
+  compression: AnalyzeCompression,
+) {
+  const rawBytes = files.reduce((total, file) => total + file.rawBytes, 0)
+  const compressedBytes = files.reduce((total, file) => total + file.compressedBytes, 0)
+  return `${formatBytes(compressedBytes)} ${compression}  ${dim(`${formatBytes(rawBytes)} raw`)}`
+}
+
+function printAnalyzeFiles(result: AnalyzeResult, options: { details: boolean }) {
+  const routeFiles = new Set(
+    result.routeBundles.flatMap(bundle => [
+      ...bundle.initial.map(file => file.path),
+      ...bundle.visibleDynamic.map(file => file.path),
+      ...bundle.dynamic.map(file => file.path),
+      ...bundle.lazyShared.map(file => file.path),
+    ]),
+  )
+  const sorted = sortedAnalyzeFiles(result.files).filter(file => !routeFiles.has(file.path))
+  if (sorted.length === 0) return
+
+  if (!options.details) {
+    console.log(
+      `Other files: ${formatFileCount(sorted)}  ${formatTotalSize(sorted, result.compression)}`,
+    )
+    console.log('Run pnext analyze --files to list them.')
+    return
+  }
+
+  console.log(`${bold('Other files')}\n`)
+  for (const type of ['html', 'css', 'js', 'asset'] as const) {
+    const files = sorted.filter(file => file.type === type)
+    if (files.length === 0) continue
+    console.log(bold(type))
+    printBundleFiles(files, result.compression, '  ', rowColumns(files))
+    console.log('')
+  }
+}
+
+function printBundleFiles(
+  files: { path: string; rawBytes: number; compressedBytes: number }[],
+  compression: AnalyzeCompression,
+  indent: string,
+  columns: RowColumns,
+) {
+  const pathWidth = Math.max(...files.map(file => file.path.length))
+  for (const file of files) {
+    console.log(
+      `${indent}${dim(file.path.padEnd(pathWidth))}  ${formatFileSize(file, compression, columns)}`,
+    )
+  }
+}
+
+interface RowColumns {
+  compressedWidth: number
+  rawWidth: number
+}
+
+function rowColumns(files: { rawBytes: number; compressedBytes: number }[]): RowColumns {
+  return {
+    compressedWidth: Math.max(...files.map(file => formatBytes(file.compressedBytes).length)),
+    rawWidth: Math.max(...files.map(file => formatBytes(file.rawBytes).length)),
+  }
+}
+
+function formatFileSize(
+  file: { rawBytes: number; compressedBytes: number },
+  compression: AnalyzeCompression,
+  columns: RowColumns,
+) {
+  const compressed = formatBytes(file.compressedBytes).padStart(columns.compressedWidth)
+  const raw = `${formatBytes(file.rawBytes).padStart(columns.rawWidth)} raw`
+  return `${compressed} ${compression}  ${dim(raw)}`
+}
+
+function formatFileCount(files: AnalyzeResult['files']) {
+  const counts = new Map<string, number>()
+  for (const file of files) counts.set(file.type, (counts.get(file.type) ?? 0) + 1)
+  return [...counts].map(([type, count]) => `${count} ${pluralFileType(type, count)}`).join(', ')
+}
+
+function pluralFileType(type: string, count: number) {
+  if (count === 1) return type
+  if (type === 'js' || type === 'css' || type === 'html') return type
+  return `${type}s`
+}
+
+function sortedAnalyzeFiles(files: AnalyzeResult['files']) {
+  return [...files].sort((a, b) => {
+    const typeDelta = analyzeTypeRank(a.type) - analyzeTypeRank(b.type)
+    if (typeDelta) return typeDelta
+    const sizeDelta = b.compressedBytes - a.compressedBytes
+    if (sizeDelta) return sizeDelta
+    return a.path.localeCompare(b.path)
+  })
+}
+
+function analyzeTypeRank(type: AnalyzeResult['files'][number]['type']) {
+  switch (type) {
+    case 'html':
+      return 0
+    case 'css':
+      return 1
+    case 'js':
+      return 2
+    case 'asset':
+      return 3
+  }
+}
+
+function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`
+  const units = ['KB', 'MB', 'GB', 'TB'] as const
+  let value = bytes / 1024
+  let unitIndex = 0
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024
+    unitIndex += 1
+  }
+  return `${value >= 10 ? value.toFixed(1) : value.toFixed(2)} ${units[unitIndex]}`
 }