Skip to content

Build summary does not show size diffs for chunks #3048

Closed
@esturcke

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions