Build summary does not show size diffs for chunks

[esturcke]

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

I'm sorry, I did not try, but I believe the problem is not with NPM.

Which terms did you search for in User Guide?

Permutations of: chunk size diff printFileSizesAfterBuild

Environment

1. node -v: v8.3.0
2. npm -v: 5.3.0
3. yarn --version (if you use Yarn): 0.27.5
4. npm ls react-scripts (if you haven’t ejected): react-scripts@1.0.12

Then, specify:

1. Operating system: OS X El Capitan (10.11.6)
2. Browser and version (if relevant): N/A

Steps to Reproduce

(Write your steps here:)

1. git clone git@github.com:esturcke/cra-chunk-bundle-diff-bug.git
2. cd cra-chunk-bundle-diff-bug
3. yarn build
4. Comment out the first line of src/content.js and uncomment the second
5. yarn build

Expected Behavior

The bundle size for content.*.chunk.js should have a diff.

Actual Behavior

Build before change:

...
File sizes after gzip:

  48.61 KB  build/static/js/main.b6cc0832.js
  288 B     build/static/css/main.cacbacc7.css
  177 B     build/static/js/content.4f2061bf.chunk.js
...

Build after change:

...
File sizes after gzip:

  48.61 KB (-1 B)  build/static/js/main.b3f3c0af.js
  288 B            build/static/css/main.cacbacc7.css
  180 B            build/static/js/content.c58cbe0c.chunk.js
...

Reproducible Demo

See repo cra-chunk-bundle-diff-bug.

Fix

I think the problem is in the regex stripping out the file hashes:

diff --git a/packages/react-dev-utils/FileSizeReporter.js b/packages/react-dev-utils/FileSizeReporter.js
index ab9a272..c678351 100644
--- a/packages/react-dev-utils/FileSizeReporter.js
+++ b/packages/react-dev-utils/FileSizeReporter.js
@@ -92,7 +92,7 @@ function printFileSizesAfterBuild(
 function removeFileNameHash(buildFolder, fileName) {
   return fileName
     .replace(buildFolder, '')
-    .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
+    .replace(/\/?(.*)(\.[0-9a-f]+)(\.chunk)?(\.js|\.css)/, (match, p1, p2, p3, p4) => p1 + p4);
 }

 // Input: 1024, 2048