Skip to content

Commit 72c3bef

Browse files
chenjiahanchenjiahan
authored
feat: refine size diff output for new files (#6691)
1 parent fef7605 commit 72c3bef

File tree

3 files changed

+41
-75
lines changed

3 files changed

+41
-75
lines changed

‎packages/core/src/plugins/fileSize.ts‎

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -157,12 +157,12 @@ async function printFileSizes(
157157
rootPath: string,
158158
distPath: string,
159159
environmentName: string,
160-
previousSizes: FileSizeCache,
160+
previousSizes: FileSizeCache | null,
161161
) {
162162
const logs: string[] = [];
163163
const showDetail = options.detail !== false;
164+
const showDiff = options.diff !== false && previousSizes !== null;
164165
let showTotal = options.total !== false;
165-
const showDiff = options.diff === true;
166166

167167
if (!showTotal && !showDetail) {
168168
return { logs, currentSizes: {} };
@@ -180,43 +180,39 @@ async function printFileSizes(
180180
const size = Buffer.byteLength(contents);
181181
const compressible = options.compressed && isCompressible(fileName);
182182
const gzippedSize = compressible ? await gzipSize(contents) : null;
183-
const gzipSizeLabel = gzippedSize
184-
? getAssetColor(gzippedSize)(calcFileSize(gzippedSize))
185-
: null;
186183

187184
// Normalize filename for comparison (remove hash)
188185
const normalizedName = normalizeFileName(fileName);
189-
const previousSizeData = previousSizes[environmentName]?.[normalizedName];
190-
const previousSize = previousSizeData?.size;
191-
192-
// Calculate size differences for inline display
193-
let sizeDiff: number | null = null;
194-
let gzipDiff: number | null = null;
195-
if (showDiff && previousSize !== undefined) {
196-
sizeDiff = size - previousSize;
197-
if (gzippedSize && previousSizeData?.gzippedSize !== undefined) {
198-
gzipDiff = gzippedSize - previousSizeData.gzippedSize;
199-
}
200-
}
201186

202187
// Store current size for next build
203188
currentSizes[normalizedName] = {
204189
size,
205190
gzippedSize: gzippedSize ?? undefined,
206191
};
207192

208-
const isNew = showDiff && previousSize === undefined;
209-
210193
// Append inline diff to sizeLabel
211194
let sizeLabel = calcFileSize(size);
212195
let sizeLabelLength = sizeLabel.length;
213-
if (isNew) {
214-
sizeLabel += ` ${color.cyan('(NEW)')}`;
215-
sizeLabelLength += 6;
216-
} else if (sizeDiff !== null && sizeDiff !== 0) {
217-
const { label, length } = formatDiff(sizeDiff);
218-
sizeLabel += ` ${label}`;
219-
sizeLabelLength += length + 1;
196+
let gzipSizeLabel = gzippedSize
197+
? getAssetColor(gzippedSize)(calcFileSize(gzippedSize))
198+
: null;
199+
200+
// Calculate size differences for inline display
201+
if (showDiff) {
202+
const sizeData = previousSizes[environmentName]?.[normalizedName];
203+
const sizeDiff = size - (sizeData?.size ?? 0);
204+
if (sizeDiff !== 0) {
205+
const { label, length } = formatDiff(sizeDiff);
206+
sizeLabel += ` ${label}`;
207+
sizeLabelLength += length + 1;
208+
}
209+
210+
if (gzippedSize) {
211+
const gzipDiff = gzippedSize - (sizeData?.gzippedSize ?? 0);
212+
if (gzipDiff !== 0) {
213+
gzipSizeLabel += ` ${formatDiff(gzipDiff).label}`;
214+
}
215+
}
220216
}
221217

222218
return {
@@ -227,8 +223,6 @@ async function printFileSizes(
227223
name: path.basename(fileName),
228224
gzippedSize,
229225
gzipSizeLabel,
230-
gzipDiff,
231-
isNew,
232226
};
233227
};
234228

@@ -317,15 +311,9 @@ async function printFileSizes(
317311
);
318312

319313
for (const asset of assets) {
320-
let { sizeLabel, sizeLabelLength, gzipSizeLabel, gzipDiff, isNew } =
321-
asset;
314+
let { sizeLabel, sizeLabelLength, gzipSizeLabel } = asset;
322315
const { name, folder } = asset;
323316

324-
// Append inline diff to gzipSizeLabel (only for existing files with changes)
325-
if (gzipSizeLabel && !isNew && gzipDiff !== null && gzipDiff !== 0) {
326-
gzipSizeLabel += ` ${formatDiff(gzipDiff).label}`;
327-
}
328-
329317
const fileNameLength = (folder + path.sep + name).length;
330318

331319
let fileNameLabel =
@@ -424,7 +412,7 @@ export const pluginFileSize = (context: InternalContext): RsbuildPlugin => ({
424412
// Load previous build sizes for comparison (only if diff is enabled)
425413
const previousSizes = showDiff
426414
? await loadPreviousSizes(api.context.cachePath)
427-
: {};
415+
: null;
428416
const newCache: FileSizeCache = {};
429417

430418
const logs = await Promise.all(

‎website/docs/en/config/performance/print-file-size.mdx‎

Lines changed: 11 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -24,36 +24,15 @@ Whether to print the file sizes after production build.
2424
The default output log is as follows:
2525

2626
```
27-
File (web) Size Gzip
28-
dist/static/js/lib-react.b0714b60.js 140.4 kB 45.0 kB
29-
dist/static/js/index.f3fde9c7.js 1.9 kB 0.97 kB
30-
dist/index.html 0.39 kB 0.25 kB
31-
dist/static/css/index.2960ac62.css 0.35 kB 0.26 kB
27+
File (web) Size Gzip
28+
dist/static/js/lib-react.b0714b60.js 140.4 kB 45.0 kB
29+
dist/static/js/index.f3fde9c7.js 1.9 kB 0.97 kB
30+
dist/index.html 0.39 kB 0.25 kB
31+
dist/static/css/index.2960ac62.css 0.35 kB 0.26 kB
3232
33-
Total: 143.0 kB 46.3 kB
33+
Total: 143.0 kB 46.3 kB
3434
```
3535

36-
When `diff` is enabled, size changes are shown inline in parentheses:
37-
38-
```
39-
File (web) Size Gzip
40-
dist/static/js/lib-react.b0714b60.js 140.4 kB (+2.1 kB) 45.0 kB (+0.5 kB)
41-
dist/static/js/index.f3fde9c7.js 1.9 kB (-0.3 kB) 0.97 kB (-0.1 kB)
42-
dist/index.html 0.39 kB 0.25 kB
43-
dist/static/css/index.2960ac62.css 0.35 kB (NEW) 0.26 kB
44-
45-
Total: 143.0 kB 46.3 kB
46-
```
47-
48-
The inline diff shows the size difference compared to the previous build:
49-
50-
- **Green** with `-` prefix (e.g., `(-0.3 kB)`) indicates the file got smaller
51-
- **Red** with `+` prefix (e.g., `(+2.1 kB)`) indicates the file got larger
52-
- **Cyan** `(NEW)` label indicates this is a new file
53-
- No diff shown means the file size hasn't changed
54-
55-
Diffs are shown for both the regular size and gzip size (when `compressed` is enabled).
56-
5736
## Disable outputs
5837

5938
If you do not want to print any information, you can disable it by setting `printFileSize` to `false`:
@@ -274,17 +253,16 @@ export default {
274253
The output will show size changes inline:
275254

276255
```
277-
File (web) Size Gzip
278-
dist/static/js/lib-react.b0714b60.js 140.4 kB (+2.1 kB) 45.0 kB (+0.5 kB)
279-
dist/static/js/index.f3fde9c7.js 1.9 kB (-0.3 kB) 0.97 kB (-0.1 kB)
280-
dist/static/css/index.2960ac62.css 0.35 kB (NEW) 0.26 kB
256+
File (web) Size Gzip
257+
dist/static/js/lib-react.b0714b60.js 140.4 kB (+2.1 kB) 45.0 kB (+0.5 kB)
258+
dist/static/js/index.f3fde9c7.js 1.9 kB (-0.3 kB) 0.97 kB (-0.1 kB)
259+
dist/static/css/index.2960ac62.css 0.35 kB (+0.35 kB) 0.26 kB (+0.26 kB)
281260
282-
Total: 143.0 kB 46.3 kB
261+
Total: 143.0 kB 46.3 kB
283262
```
284263

285264
- Size increases are shown in **red** with a `+` prefix
286265
- Size decreases are shown in **green** with a `-` prefix
287-
- New files are marked with a **cyan** `(NEW)` label
288266
- Unchanged files don't show any diff
289267

290268
## Version history

‎website/docs/zh/config/performance/print-file-size.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ type PrintFileSizeOptions =
2323
默认输出的日志如下：
2424

2525
```
26-
File (web) Size Gzip
27-
dist/static/js/lib-react.b0714b60.js 140.4 kB 45.0 kB
28-
dist/static/js/index.f3fde9c7.js 1.9 kB 0.97 kB
29-
dist/index.html 0.39 kB 0.25 kB
30-
dist/static/css/index.2960ac62.css 0.35 kB 0.26 kB
26+
File (web) Size Gzip
27+
dist/static/js/lib-react.b0714b60.js 140.4 kB 45.0 kB
28+
dist/static/js/index.f3fde9c7.js 1.9 kB 0.97 kB
29+
dist/index.html 0.39 kB 0.25 kB
30+
dist/static/css/index.2960ac62.css 0.35 kB 0.26 kB
3131
32-
Total: 143.0 kB 46.3 kB
32+
Total: 143.0 kB 46.3 kB
3333
```
3434

3535
## 禁用输出

0 commit comments

Comments
 (0)