diff --git a/packages-private/diagnostics-backend/test/__snapshots__/render-md.md b/packages-private/diagnostics-backend/test/__snapshots__/render-md.md index 890eb2ba92..692f0209c2 100644 --- a/packages-private/diagnostics-backend/test/__snapshots__/render-md.md +++ b/packages-private/diagnostics-backend/test/__snapshots__/render-md.md @@ -1,20 +1,20 @@ ## ⚙️ Backend Diagnostics Report ### Memory: After GC -| Metric | @ Base | @ Head | Δ | MAD | +| Metric | @ Base | @ Head | Δ | MAD | | --- | ---: | ---: | ---: | ---: | -| **HeapUsed** | 152 MB
± 1 MB | 168 MB
± 1 MB | $\color{orange}{\text{+16 MB}}$
$\color{orange}{\text{+10.5\\%}}$ | 1.4 MB | -| **PSS** | 202 MB
± 1 MB | 218 MB
± 1 MB | $\color{orange}{\text{+16 MB}}$
$\color{orange}{\text{+7.9\\%}}$ | 1.4 MB | -| **USS** | 184 MB
± 1 MB | 200 MB
± 1 MB | $\color{orange}{\text{+16 MB}}$
$\color{orange}{\text{+8.7\\%}}$ | 1.4 MB | +| **HeapUsed** | 152 MB
± 1 MB | 168 MB
± 1 MB | $\color{orange}{\text{+16 MB}}$
$\color{orange}{\text{+10.5\\%}}$ | 1.4 MB | +| **PSS** | 202 MB
± 1 MB | 218 MB
± 1 MB | $\color{orange}{\text{+16 MB}}$
$\color{orange}{\text{+7.9\\%}}$ | 1.4 MB | +| **USS** | 184 MB
± 1 MB | 200 MB
± 1 MB | $\color{orange}{\text{+16 MB}}$
$\color{orange}{\text{+8.7\\%}}$ | 1.4 MB | Only metrics showing significant changes are displayed. ### V8 Heap Snapshot Statistics -| Metric | @ Base | @ Head | Δ | MAD | +| Metric | @ Base | @ Head | Δ | MAD | | --- | ---: | ---: | ---: | ---: | -| $\color{gray}{\rule{8pt}{8pt}}$ **Total** | 40 MB
± 200 KB | 44 MB
± 200 KB | $\color{orange}{\text{+3.2 MB}}$
$\color{orange}{\text{+7.9\\%}}$ | 283 KB | +| $\color{gray}{\rule{8pt}{8pt}}$ **Total** | 40 MB
± 200 KB | 44 MB
± 200 KB | $\color{orange}{\text{+3.2 MB}}$
$\color{orange}{\text{+7.9\\%}}$ | 283 KB | | | | | | | | $\color{orange}{\rule{8pt}{8pt}}$ **Code** | 4.7 MB | 5.1 MB | $\color{orange}{\text{+376 KB}}$ | 33 KB | | $\color{red}{\rule{8pt}{8pt}}$ **Strings** | 4.4 MB | 4.8 MB | $\color{orange}{\text{+352 KB}}$ | 31 KB | diff --git a/packages-private/diagnostics-backend/test/render-md.test.ts b/packages-private/diagnostics-backend/test/render-md.test.ts index 6dcf1979ca..fb1226bda3 100644 --- a/packages-private/diagnostics-backend/test/render-md.test.ts +++ b/packages-private/diagnostics-backend/test/render-md.test.ts @@ -80,8 +80,8 @@ test('reports the difference of medians and leaves a paired-looking PSS delta un }); const row = findMetricRow(markdown, 'PSS'); - expect(row).toContain('295.8 MB
± 2.9 MB'); - expect(row).toContain('296.3 MB
± 3.4 MB'); + expect(row).toContain('295.8 MB
± 2.9 MB'); + expect(row).toContain('296.3 MB
± 3.4 MB'); expect(row).toContain('$\\text{+0.5 MB}$'); expect(row).toContain('4.5 MB'); expect(row.split('|')).toHaveLength(7); @@ -131,6 +131,6 @@ test('renders an unavailable percentage when the base median is zero', async () }); expect(findMetricRow(markdown, 'External')).toContain('
-'); - expect(markdown).toContain('| Metric | @ Base | @ Head | Δ | MAD |'); - expect(markdown).not.toContain('| Metric | @ Base | @ Head | Δ | MAD | Result |'); + expect(markdown).toContain('| Metric | @ Base | @ Head | Δ | MAD |'); + expect(markdown).not.toContain('| Metric | @ Base | @ Head | Δ | MAD | Result |'); }); diff --git a/packages-private/diagnostics-frontend/src/bundle/visualizer.ts b/packages-private/diagnostics-frontend/src/bundle/visualizer.ts index 199accf2d7..51f7264eed 100644 --- a/packages-private/diagnostics-frontend/src/bundle/visualizer.ts +++ b/packages-private/diagnostics-frontend/src/bundle/visualizer.ts @@ -194,7 +194,7 @@ export function renderVisualizerSummaryTable(base: ReturnType `${calcAndFormatDeltaBytes(base.metrics[key], head.metrics[key], 1000)}`), '', '', - 'Δ (%)', + 'Δ (%)', ...summary.map((key) => `${calcAndFormatDeltaPercent(base.summary[key], head.summary[key], 0.1)}`), ...metrics.map((key) => `${calcAndFormatDeltaPercent(base.metrics[key], head.metrics[key], 0.1)}`), '', diff --git a/packages-private/diagnostics-frontend/test/__snapshots__/report.md b/packages-private/diagnostics-frontend/test/__snapshots__/report.md index 922c360807..0288d7f379 100644 --- a/packages-private/diagnostics-frontend/test/__snapshots__/report.md +++ b/packages-private/diagnostics-frontend/test/__snapshots__/report.md @@ -1,12 +1,12 @@ ## 🖥 Frontend Diagnostics Report -| Metric | @ Base | @ Head | Δ | MAD | +| Metric | @ Base | @ Head | Δ | MAD | | --- | ---: | ---: | ---: | ---: | -| **Encoded network** | 1 MB
± 10 KB | 1.1 MB
± 11 KB | $\color{orange}{\text{+83 KB}}$
$\color{orange}{\text{+8\\%}}$ | 15 KB | -| **Decoded body** | 3.5 MB
± 34 KB | 3.7 MB
± 37 KB | $\color{orange}{\text{+277 KB}}$
$\color{orange}{\text{+8\\%}}$ | 50 KB | -| **Same-origin encoded** | 1 MB
± 10 KB | 1.1 MB
± 11 KB | $\color{orange}{\text{+82 KB}}$
$\color{orange}{\text{+8\\%}}$ | 15 KB | -| **Script encoded** | 918 KB
± 9 KB | 991 KB
± 9.7 KB | $\color{orange}{\text{+73 KB}}$
$\color{orange}{\text{+8\\%}}$ | 13 KB | -| **Page-attributed memory** | 92 MB
± 900 KB | 99 MB
± 972 KB | $\color{orange}{\text{+7.3 MB}}$
$\color{orange}{\text{+8\\%}}$ | 1.3 MB | +| **Encoded network** | 1 MB
± 10 KB | 1.1 MB
± 11 KB | $\color{orange}{\text{+83 KB}}$
$\color{orange}{\text{+8\\%}}$ | 15 KB | +| **Decoded body** | 3.5 MB
± 34 KB | 3.7 MB
± 37 KB | $\color{orange}{\text{+277 KB}}$
$\color{orange}{\text{+8\\%}}$ | 50 KB | +| **Same-origin encoded** | 1 MB
± 10 KB | 1.1 MB
± 11 KB | $\color{orange}{\text{+82 KB}}$
$\color{orange}{\text{+8\\%}}$ | 15 KB | +| **Script encoded** | 918 KB
± 9 KB | 991 KB
± 9.7 KB | $\color{orange}{\text{+73 KB}}$
$\color{orange}{\text{+8\\%}}$ | 13 KB | +| **Page-attributed memory** | 92 MB
± 900 KB | 99 MB
± 972 KB | $\color{orange}{\text{+7.3 MB}}$
$\color{orange}{\text{+8\\%}}$ | 1.3 MB | Only metrics showing significant changes are displayed. @@ -67,9 +67,9 @@
V8 heap snapshot statistics -| Metric | @ Base | @ Head | Δ | MAD | +| Metric | @ Base | @ Head | Δ | MAD | | --- | ---: | ---: | ---: | ---: | -| $\color{gray}{\rule{8pt}{8pt}}$ **Total** | 1 MB
± 10 KB | 1.1 MB
± 11 KB | $\text{+82 KB}$
$\text{+8\\%}$ | 15 KB | +| $\color{gray}{\rule{8pt}{8pt}}$ **Total** | 1 MB
± 10 KB | 1.1 MB
± 11 KB | $\text{+82 KB}$
$\text{+8\\%}$ | 15 KB | | | | | | | | $\color{orange}{\rule{8pt}{8pt}}$ **Code** | 2 MB | 2.2 MB | $\color{orange}{\text{+163 KB}}$ | 29 KB | | $\color{red}{\rule{8pt}{8pt}}$ **Strings** | 3.1 MB | 3.3 MB | $\color{orange}{\text{+245 KB}}$ | 44 KB | diff --git a/packages-private/diagnostics-frontend/test/report.test.ts b/packages-private/diagnostics-frontend/test/report.test.ts index 463374aeec..200ba8ed1e 100644 --- a/packages-private/diagnostics-frontend/test/report.test.ts +++ b/packages-private/diagnostics-frontend/test/report.test.ts @@ -151,8 +151,8 @@ test('renders one frontend diagnostics markdown report from bundle and browser d const markdown = await renderReport('https://example.invalid/html'); await expect(markdown).toMatchFileSnapshot('./__snapshots__/report.md'); - expect(markdown).toContain('| Metric | @ Base | @ Head | Δ | MAD |'); - expect(markdown).not.toContain('| Metric | @ Base | @ Head | Δ | MAD | Result |'); + expect(markdown).toContain('| Metric | @ Base | @ Head | Δ | MAD |'); + expect(markdown).not.toContain('| Metric | @ Base | @ Head | Δ | MAD | Result |'); expect(markdown).toContain('Requests by resource type'); expect(markdown).toContain('## 📦 Bundle Stats'); }); @@ -177,8 +177,8 @@ test('renders the difference of independent medians instead of the paired median const row = requireMetricRow(await renderReport(null, { base, head }), 'Requests'); - expect(row).toContain('100
± 0'); - expect(row).toContain('200
± 0'); + expect(row).toContain('100
± 0'); + expect(row).toContain('200
± 0'); expect(row).toContain('$\\color{orange}{\\text{+100}}$
$\\color{orange}{\\text{+100\\\\%}}$'); expect(row).toContain('| 0 |'); expect(row.split('|')).toHaveLength(7); @@ -268,7 +268,7 @@ test('colours absolute and relative deltas together when the row is significant' const row = requireMetricRow(await renderReport(null, { base, head }), 'Encoded network'); - expect(row).toContain('100 MB
± 0 B'); + expect(row).toContain('100 MB
± 0 B'); expect(row).toContain('$\\color{orange}{\\text{+20 KB}}$
$\\color{orange}{\\text{+0\\\\%}}$'); expect(row).toContain('| 0 B |'); expect(row.split('|')).toHaveLength(7); diff --git a/packages-private/diagnostics-shared/src/format.ts b/packages-private/diagnostics-shared/src/format.ts index 75dc835e7b..9ec2a8a749 100644 --- a/packages-private/diagnostics-shared/src/format.ts +++ b/packages-private/diagnostics-shared/src/format.ts @@ -33,7 +33,7 @@ export function formatNumber(value: number) { } export function formatBytes(value: number) { - if (value === 0) return '0 B'; + if (value === 0) return '0 B'; // nbspにすること const units = ['B', 'KB', 'MB', 'GB']; let unitIndex = 0; let size = value; @@ -43,7 +43,8 @@ export function formatBytes(value: number) { } const maximumFractionDigits = size >= 10 || unitIndex === 0 ? 0 : 1; - return `${numberFormatter.format(Number(size.toFixed(maximumFractionDigits)))} ${units[unitIndex]}`; + // eslint-disable-next-line no-irregular-whitespace + return `${numberFormatter.format(Number(size.toFixed(maximumFractionDigits)))} ${units[unitIndex]}`; // nbspにすること } /** @@ -75,9 +76,9 @@ export function formatSecondsAsMs(value: number | null | undefined) { export function formatColoredDelta(delta: number, text: (value: number) => string, colorThreshold = 0) { if (delta === 0) return text(0); const sign = delta > 0 ? '+' : '-'; - if (Math.abs(delta) < colorThreshold) return `$\\text{${sign}${escapeLatex(text(Math.abs(delta)))}}$`; + if (Math.abs(delta) < colorThreshold) return `$\\text{${sign}${escapeLatex(text(Math.abs(delta))).replaceAll(' ', '~')}}$`; // "1 B"とかで1とBの間で自動改行させないためnbsp(~)にする const color = delta > 0 ? 'orange' : 'green'; - return `$\\color{${color}}{\\text{${sign}${escapeLatex(text(Math.abs(delta)))}}}$`; + return `$\\color{${color}}{\\text{${sign}${escapeLatex(text(Math.abs(delta))).replaceAll(' ', '~')}}}$`; // "1 B"とかで1とBの間で自動改行させないためnbsp(~)にする } export function formatDeltaBytes(deltaBytes: number, colorThreshold = 0) { diff --git a/packages-private/diagnostics-shared/src/metric-table.ts b/packages-private/diagnostics-shared/src/metric-table.ts index 00008fb61d..e9c55d48b2 100644 --- a/packages-private/diagnostics-shared/src/metric-table.ts +++ b/packages-private/diagnostics-shared/src/metric-table.ts @@ -35,7 +35,8 @@ function formatMedian( ) { const formatted = row.formatValue(value); if (row.showMedianMad === false) return formatted; - return `${formatted}
± ${row.formatValue(spread)}`; + // eslint-disable-next-line no-irregular-whitespace + return `${formatted}
± ${row.formatValue(spread)}`; // nbspにすること } function formatDelta( @@ -77,7 +78,7 @@ export function renderMetricComparisonTable( if (lines.length === 0) return '**(No significant changes)**'; return [ - '| Metric | @ Base | @ Head | Δ | MAD |', + '| Metric | @ Base | @ Head | Δ | MAD |', '| --- | ---: | ---: | ---: | ---: |', ...lines, ...(omitted ? ['', 'Only metrics showing significant changes are displayed.'] : []), diff --git a/packages-private/diagnostics-shared/test/heap-snapshot-render.test.ts b/packages-private/diagnostics-shared/test/heap-snapshot-render.test.ts index ba56dbb659..b02b72a1c4 100644 --- a/packages-private/diagnostics-shared/test/heap-snapshot-render.test.ts +++ b/packages-private/diagnostics-shared/test/heap-snapshot-render.test.ts @@ -88,7 +88,7 @@ describe('renderHeapSnapshotTable', () => { const categoryRow = lines.find(line => line.includes('**Code**')); expect(lines.slice(0, 2)).toStrictEqual([ - '| Metric | @ Base | @ Head | Δ | MAD |', + '| Metric | @ Base | @ Head | Δ | MAD |', '| --- | ---: | ---: | ---: | ---: |', ]); expect(table).not.toContain('Result'); diff --git a/packages-private/diagnostics-shared/test/metric-table.test.ts b/packages-private/diagnostics-shared/test/metric-table.test.ts index f1dcafb092..127a02f8b5 100644 --- a/packages-private/diagnostics-shared/test/metric-table.test.ts +++ b/packages-private/diagnostics-shared/test/metric-table.test.ts @@ -31,9 +31,9 @@ describe('renderMetricComparisonTable', () => { ); expect(table.split('\n')).toStrictEqual([ - '| Metric | @ Base | @ Head | Δ | MAD |', + '| Metric | @ Base | @ Head | Δ | MAD |', '| --- | ---: | ---: | ---: | ---: |', - '| Metric | 100 units
± 0 units | 120 units
± 0 units | $\\color{orange}{\\text{+20 units}}$
$\\color{orange}{\\text{+20\\\\%}}$ | 0 units |', + '| Metric | 100 units
± 0 units | 120 units
± 0 units | $\\color{orange}{\\text{+20 units}}$
$\\color{orange}{\\text{+20\\\\%}}$ | 0 units |', ]); }); @@ -50,7 +50,7 @@ describe('renderMetricComparisonTable', () => { ); expect(table.split('\n')).toStrictEqual([ - '| Metric | @ Base | @ Head | Δ | MAD |', + '| Metric | @ Base | @ Head | Δ | MAD |', '| --- | ---: | ---: | ---: | ---: |', '| Metric | 100 units | 120 units | $\\color{orange}{\\text{+20 units}}$ | 0 units |', '| | | | | |',