From a4263a7b9b62474c9bf35dfb422fe9902b1c8cfe Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 10 Oct 2024 11:10:43 +0800 Subject: [PATCH] feat: beautify file size logs for multiple environments (#3668) --- e2e/cases/print-file-size/basic/index.test.ts | 36 ++++++--------- .../print-file-size/with-error/index.test.ts | 4 +- packages/core/src/plugins/fileSize.ts | 45 +++++++++++++------ .../en/config/performance/print-file-size.mdx | 7 +-- .../zh/config/performance/print-file-size.mdx | 7 +-- 5 files changed, 51 insertions(+), 48 deletions(-) diff --git a/e2e/cases/print-file-size/basic/index.test.ts b/e2e/cases/print-file-size/basic/index.test.ts index a8e48b7961..864250ddfe 100644 --- a/e2e/cases/print-file-size/basic/index.test.ts +++ b/e2e/cases/print-file-size/basic/index.test.ts @@ -29,8 +29,8 @@ test.describe('should print file size correctly', async () => { }); expect(logs.some((log) => log.includes('index.html'))).toBeTruthy(); - expect(logs.some((log) => log.includes('Total size:'))).toBeTruthy(); - expect(logs.some((log) => log.includes('Gzipped size:'))).toBeTruthy(); + expect(logs.some((log) => log.includes('Total:'))).toBeTruthy(); + expect(logs.some((log) => log.includes('gzip:'))).toBeTruthy(); }); test('should print size of multiple environments correctly', async () => { @@ -62,11 +62,7 @@ test.describe('should print file size correctly', async () => { }); // dist/index.html - expect( - logs.some( - (log) => log.includes('Production file sizes') && log.includes('web'), - ), - ).toBeTruthy(); + expect(logs.some((log) => log.includes('File (web)'))).toBeTruthy(); expect( logs.some( @@ -78,11 +74,7 @@ test.describe('should print file size correctly', async () => { ).toBeTruthy(); // dist/server/index.js - expect( - logs.some( - (log) => log.includes('Production file sizes') && log.includes('node'), - ), - ).toBeTruthy(); + expect(logs.some((log) => log.includes('File (node)'))).toBeTruthy(); expect( logs.some( (log) => @@ -103,11 +95,11 @@ test.describe('should print file size correctly', async () => { ).toBeTruthy(); expect( - logs.some((log) => log.includes('Total size:') && log.includes('kB')), + logs.some((log) => log.includes('Total:') && log.includes('kB')), ).toBeTruthy(); expect( - logs.some((log) => log.includes('Gzipped size:') && log.includes('kB')), + logs.some((log) => log.includes('gzip:') && log.includes('kB')), ).toBeTruthy(); }); @@ -122,8 +114,8 @@ test.describe('should print file size correctly', async () => { }); expect(logs.some((log) => log.includes('index.html'))).toBeFalsy(); - expect(logs.some((log) => log.includes('Total size:'))).toBeFalsy(); - expect(logs.some((log) => log.includes('Gzipped size:'))).toBeFalsy(); + expect(logs.some((log) => log.includes('Total:'))).toBeFalsy(); + expect(logs.some((log) => log.includes('gzip:'))).toBeFalsy(); }); test('printFileSize.detail: false should work', async () => { @@ -139,8 +131,8 @@ test.describe('should print file size correctly', async () => { }); expect(logs.some((log) => log.includes('index.html'))).toBeFalsy(); - expect(logs.some((log) => log.includes('Total size:'))).toBeTruthy(); - expect(logs.some((log) => log.includes('Gzipped size:'))).toBeTruthy(); + expect(logs.some((log) => log.includes('Total:'))).toBeTruthy(); + expect(logs.some((log) => log.includes('gzip:'))).toBeTruthy(); }); test('printFileSize.total: false should work', async () => { @@ -156,8 +148,8 @@ test.describe('should print file size correctly', async () => { }); expect(logs.some((log) => log.includes('index.html'))).toBeTruthy(); - expect(logs.some((log) => log.includes('Total size:'))).toBeFalsy(); - expect(logs.some((log) => log.includes('Gzipped size:'))).toBeFalsy(); + expect(logs.some((log) => log.includes('Total:'))).toBeFalsy(); + expect(logs.some((log) => log.includes('gzip:'))).toBeFalsy(); }); test('should print dist folder correctly if it is not a subdir of root', async () => { @@ -195,7 +187,7 @@ test.describe('should print file size correctly', async () => { }); expect(logs.some((log) => log.includes('index.html'))).toBeTruthy(); - expect(logs.some((log) => log.includes('Total size:'))).toBeTruthy(); - expect(logs.some((log) => log.includes('Gzipped size:'))).toBeFalsy(); + expect(logs.some((log) => log.includes('Total:'))).toBeTruthy(); + expect(logs.some((log) => log.includes('gzip:'))).toBeFalsy(); }); }); diff --git a/e2e/cases/print-file-size/with-error/index.test.ts b/e2e/cases/print-file-size/with-error/index.test.ts index ffeb8ab4f5..18aa7a330d 100644 --- a/e2e/cases/print-file-size/with-error/index.test.ts +++ b/e2e/cases/print-file-size/with-error/index.test.ts @@ -19,8 +19,8 @@ test('should not print file size if has errors', async () => { expect(err).toBeTruthy(); } - expect(logs.some((log) => log.includes('Total size:'))).toBeFalsy(); - expect(logs.some((log) => log.includes('Gzipped size:'))).toBeFalsy(); + expect(logs.some((log) => log.includes('Total:'))).toBeFalsy(); + expect(logs.some((log) => log.includes('gzip:'))).toBeFalsy(); restore(); }); diff --git a/packages/core/src/plugins/fileSize.ts b/packages/core/src/plugins/fileSize.ts index dc853e2d1e..263d5714b5 100644 --- a/packages/core/src/plugins/fileSize.ts +++ b/packages/core/src/plugins/fileSize.ts @@ -36,12 +36,13 @@ function getHeader( longestFileLength: number, longestLabelLength: number, options: PrintFileSizeOptions, + environmentName: string, ) { const longestLengths = [longestFileLength, longestLabelLength]; - const rowTypes = ['File', 'Size']; + const rowTypes = [`File (${environmentName})`, 'Size']; if (options.compressed) { - rowTypes.push('Gzipped'); + rowTypes.push('Gzip'); } const headerRow = rowTypes.reduce((prev, cur, index) => { @@ -54,7 +55,7 @@ function getHeader( return `${prev + curLabel} `; }, ' '); - return color.bold(color.blue(headerRow)); + return color.blue(headerRow); } const calcFileSize = (len: number) => { @@ -79,6 +80,7 @@ async function printFileSizes( options: PrintFileSizeOptions, stats: Rspack.Stats, rootPath: string, + environmentName: string, ) { const logs: string[] = []; if (options.detail === false && options.total === false) { @@ -142,6 +144,8 @@ async function printFileSizes( return logs; } + logs.push(''); + assets.sort((a, b) => a.size - b.size); const longestLabelLength = Math.max(...assets.map((a) => a.sizeLabel.length)); @@ -150,7 +154,14 @@ async function printFileSizes( ); if (options.detail !== false) { - logs.push(getHeader(longestFileLength, longestLabelLength, options)); + logs.push( + getHeader( + longestFileLength, + longestLabelLength, + options, + environmentName, + ), + ); } let totalSize = 0; @@ -193,19 +204,18 @@ async function printFileSizes( } if (options.total !== false) { - const totalSizeLabel = `${color.bold( - color.blue('Total size:'), - )} ${calcFileSize(totalSize)}`; + const totalSizeLabel = `${color.blue('Total:')} ${calcFileSize(totalSize)}`; - let log = `\n ${totalSizeLabel}\n`; + let log = `\n ${totalSizeLabel}`; if (options.compressed) { - const gzippedSizeLabel = `${color.bold( - color.blue('Gzipped size:'), - )} ${calcFileSize(totalGzipSize)}`; - log += ` ${gzippedSizeLabel}\n`; + log += color.dim(` (gzip: ${calcFileSize(totalGzipSize)})`); } + // log += ` ${color.dim(`(${environmentName})`)}`; + + log += '\n'; + logs.push(log); } @@ -222,6 +232,8 @@ export const pluginFileSize = (): RsbuildPlugin => ({ return; } + let printed = false; + await Promise.all( Object.values(environments).map(async (environment, index) => { const { printFileSize } = environment.config.performance; @@ -250,14 +262,19 @@ export const pluginFileSize = (): RsbuildPlugin => ({ mergedConfig, multiStats[index], api.context.rootPath, + environment.name, ); - const name = color.green(environment.name); - logger.info(`Production file sizes for ${name}:\n`); + // log a separator line after the previous print + if (printed) { + logger.log(color.dim(' -----')); + } for (const log of statsLog) { logger.log(log); } + + printed = true; }), ).catch((err) => { logger.warn('Failed to print file size.'); diff --git a/website/docs/en/config/performance/print-file-size.mdx b/website/docs/en/config/performance/print-file-size.mdx index 938dd6baee..24f5c3f78f 100644 --- a/website/docs/en/config/performance/print-file-size.mdx +++ b/website/docs/en/config/performance/print-file-size.mdx @@ -30,16 +30,13 @@ Whether to print the file sizes after production build. The default output log is as follows: ```bash -info Production file sizes: - - File Size Gzipped + File (web) Size Gzip dist/static/js/lib-react.b0714b60.js 140.4 kB 45.0 kB dist/static/js/index.f3fde9c7.js 1.9 kB 0.97 kB dist/index.html 0.39 kB 0.25 kB dist/static/css/index.2960ac62.css 0.35 kB 0.26 kB - Total size: 143.0 kB - Gzipped size: 46.5 kB + Total: 143.0 kB (gzip: 46.3 kB) ``` ## Disable Outputs diff --git a/website/docs/zh/config/performance/print-file-size.mdx b/website/docs/zh/config/performance/print-file-size.mdx index 4a11844b5b..f80aa415cc 100644 --- a/website/docs/zh/config/performance/print-file-size.mdx +++ b/website/docs/zh/config/performance/print-file-size.mdx @@ -30,16 +30,13 @@ type PrintFileSizeOptions = 默认输出的日志如下： ```bash -info Production file sizes: - - File Size Gzipped + File (web) Size Gzip dist/static/js/lib-react.b0714b60.js 140.4 kB 45.0 kB dist/static/js/index.f3fde9c7.js 1.9 kB 0.97 kB dist/index.html 0.39 kB 0.25 kB dist/static/css/index.2960ac62.css 0.35 kB 0.26 kB - Total size: 143.0 kB - Gzipped size: 46.5 kB + Total: 143.0 kB (gzip: 46.3 kB) ``` ## 禁用输出