diff --git a/.github/scripts/frontend-bundle-visualizer-report.mjs b/.github/scripts/frontend-bundle-visualizer-report.mjs index ee1777f634..21e25707c5 100644 --- a/.github/scripts/frontend-bundle-visualizer-report.mjs +++ b/.github/scripts/frontend-bundle-visualizer-report.mjs @@ -171,82 +171,76 @@ function collectReport(data) { } function renderSummaryTable(before, after) { + const summary = [ + 'bundles', + 'modules', + 'entries', + 'externals', + 'staticImports', + 'dynamicImports', + ]; + const metrics = [ - { key: 'bundles', label: 'Bundles' }, - { key: 'modules', label: 'Modules' }, - { key: 'entries', label: 'Entries' }, - { key: 'externals', label: 'Externals' }, - { key: 'staticImports', label: 'Static' }, - { key: 'dynamicImports', label: 'Dynamic' }, + 'renderedLength', + 'gzipLength', + 'brotliLength', ]; return [ ``, ``, - ``, ``, - ``, - ...metrics.map((metric) => ``), + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, + ``, ``, ``, ``, ``, ``, - ...metrics.map((metric) => ``), + ...summary.map((key) => ``), + ...metrics.map((key) => ``), ``, ``, ``, - ...metrics.map((metric) => ``), + ...summary.map((key) => ``), + ...metrics.map((key) => ``), ``, - ``, + ``, ``, ``, - ...metrics.map((metric) => ``), + ...summary.map((key) => ``), + ...metrics.map((key) => ``), ``, ``, ``, - ...metrics.map((metric) => ``), + ...summary.map((key) => ``), + ...metrics.map((key) => ``), ``, ``, `
Imports
${metric.label}BundlesModulesEntriesImportsSize
StaticDynamicRenderedGzipBrotli
Before${formatNumber(before.summary[metric.key])}${formatNumber(before.summary[key])}${formatBytes(before.metrics[key])}
After${formatNumber(after.summary[metric.key])}${formatNumber(after.summary[key])}${formatBytes(after.metrics[key])}
Diff${formatDiff(before.summary[metric.key], after.summary[metric.key], formatNumber)}${formatDiff(before.summary[key], after.summary[key], formatNumber)}${formatDiff(before.metrics[key], after.metrics[key], formatBytes)}
Diff (%)${formatDiffPercent(before.summary[metric.key], after.summary[metric.key])}${formatDiffPercent(before.summary[key], after.summary[key])}${formatDiffPercent(before.metrics[key], after.metrics[key])}
`, ]; } -function renderMetricTable(before, after) { - const metrics = [ - { key: 'renderedLength', label: 'Rendered size' }, - ]; - if (before.options.gzip || after.options.gzip) { - metrics.push({ key: 'gzipLength', label: 'Gzip size' }); - } - if (before.options.brotli || after.options.brotli) { - metrics.push({ key: 'brotliLength', label: 'Brotli size' }); - } - - const lines = [ - '| Metric | Before | After | Diff | Diff (%) |', - '|---|---:|---:|---:|---:|', - ]; - for (const metric of metrics) { - const beforeValue = before.metrics[metric.key]; - const afterValue = after.metrics[metric.key]; - lines.push(`| ${metric.label} | ${formatBytes(beforeValue)} | ${formatBytes(afterValue)} | ${formatDiff(beforeValue, afterValue, formatBytes)} | ${formatDiffPercent(beforeValue, afterValue)} |`); - } - - return lines; -} - const beforeData = JSON.parse(await readFile(beforeFile, 'utf8')); const afterData = JSON.parse(await readFile(afterFile, 'utf8')); const before = collectReport(beforeData); const after = collectReport(afterData); const lines = [ - '# Frontend Bundle Report', + '## Frontend Bundle Report', '', ...renderSummaryTable(before, after), '', - ...renderMetricTable(before, after), - '', '
', 'Top 10', '',