Build warning /static/js/filename.chunk.js is 3.87 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

[chanan]

Describe the bug

After updating to v4.0.0 when I build I get the below warning, which causes the build to fail in CI environment:

/static/js/155.6cc63d87.chunk.js is 3.87 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

The weird thing is that when I build, the output of the build command doesnt show the file to be that size

637.26 KB build\static\js\155.6cc63d87.chunk.js 

However, if I list the file directly it is much bigger than the build output says it is:

-a---- 11/2/2020 8:34 AM 3874415 155.6cc63d87.chunk.js
-a---- 11/2/2020 8:34 AM 4248 155.6cc63d87.chunk.js.LICENSE.txt
-a---- 11/2/2020 8:34 AM 7869621 155.6cc63d87.chunk.js.map

Did you try recovering your dependencies?

Yes. Deleted node_modules, yarn.lock - did not help

Which terms did you search for in User Guide?

n/a

Environment

Environment Info:

 current version of create-react-app: 4.0.0
 running from C:\Users\cbraunstein\AppData\Roaming\npm-cache\_npx\17108\node_modules\create-react-app

 System:
 OS: Windows 10 10.0.20246
 CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
 Binaries:
 Node: 12.18.0 - C:\Program Files\nodejs\node.EXE
 Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
 npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
 Browsers:
 Chrome: 86.0.4240.111
 Edge: Spartan (44.20246.1.0), ChromiumDev (88.0.680.1)
 Internet Explorer: 11.0.20246.1
 npmPackages:
 react: 17.0.1 => 17.0.1
 react-dom: 17.0.1 => 17.0.1
 react-scripts: 4.0.0 => 4.0.0
 npmGlobalPackages:
 create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. yarn build

Expected behavior

No warning should be outputted

Actual behavior

A warning is outputted from the build. In case of a CI the build is failed.

Reproducible demo

I can not share this project. I will try to create a blank one and see if I can recreate it.

 ~\..\..\devops   main ≣ ~1 -0 !  yarn build
yarn run v1.22.5
$ react-scripts build
Creating an optimized production build...
Compiled with warnings.

/static/js/155.6cc63d87.chunk.js is 3.87 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

 637.26 KB build\static\js\155.6cc63d87.chunk.js
 63.52 KB build\static\js\159.768d4811.chunk.js
 19.48 KB build\static\js\157.913aa113.chunk.js
 11.56 KB build\static\js\156.6ba34070.chunk.js
 9.91 KB build\static\js\main.d5a9c99f.chunk.js

[Arcath]

I'm getting the same thing. Netlify is failing with it as an error due to warnings being considered errors in CI.

Whilst being able to tweak the maximumFileSizeToCacheInBytes would fix the problem it actually prompted me to look into chunking the app. My app was only a couple of chunks but after using route based code splitting and nothing else I drastically increased the number of chunks are more importantly I reduced the chunk size of the "main" chunk below this limit and got builds working again.

This won't help if chunking isn't possible but its aleast something to look at.

[chanan]

Not sure if this is exactly what you mean, but I did change my routes to load using react.lazy - I thought that would cause different chunks to be created, it didnt help. Is there something else I can do to make the build create different sized chucks?

[Arcath]

@chanan When I swapped to using const CustomerList = lazy(() => import('./components/customers/list')) to load the components used in routes I went from:

11:21:35 AM: File sizes after gzip:
11:21:35 AM: 645.82 KB build/static/js/2.12c01d70.chunk.js
11:21:35 AM: 31.54 KB build/static/js/main.0fd29877.chunk.js
11:21:35 AM: 8.52 KB build/static/css/2.2b564225.chunk.css
11:21:35 AM: 772 B build/static/js/runtime-main.2c219ed3.js
11:21:35 AM: 388 B build/static/css/main.c60f018d.chunk.css

to

7:33:19 PM: File sizes after gzip:
7:33:19 PM: 346.47 KB build/static/js/8.1bdd72c4.chunk.js
7:33:19 PM: 98.73 KB build/static/js/3.1821fa9d.chunk.js
7:33:19 PM: 97.28 KB build/static/js/1.43e19610.chunk.js
7:33:19 PM: 41.38 KB build/static/js/5.7120eb98.chunk.js
7:33:19 PM: 34.34 KB build/static/js/11.44104896.chunk.js
7:33:19 PM: 15.65 KB build/static/js/12.8c09c7c9.chunk.js
7:33:19 PM: 9.58 KB build/static/js/15.d58879eb.chunk.js
7:33:19 PM: 9.35 KB build/static/js/9.a01e6be4.chunk.js
7:33:19 PM: 8.17 KB build/static/js/main.60e2c9a8.chunk.js
7:33:19 PM: 6.82 KB build/static/js/10.70abbee1.chunk.js
7:33:19 PM: 6.17 KB build/static/css/8.3d0b8d2d.chunk.css
7:33:19 PM: 5.85 KB build/static/js/0.93cfa7b6.chunk.js
7:33:19 PM: 5.47 KB build/static/js/14.87f4e0f2.chunk.js
7:33:19 PM: 4.32 KB build/static/js/4.ccfbfbbc.chunk.js
7:33:19 PM: 4.27 KB build/static/js/13.87323547.chunk.js
7:33:19 PM: 3.77 KB build/static/js/2.590da0e9.chunk.js
7:33:19 PM: 3.33 KB build/static/js/19.b0078873.chunk.js
7:33:19 PM: 2.68 KB build/static/js/37.a0f48e79.chunk.js
7:33:19 PM: 2.61 KB build/static/js/16.9f92fe1c.chunk.js
7:33:19 PM: 1.95 KB build/static/js/17.36b70992.chunk.js
7:33:19 PM: 1.94 KB build/static/js/26.e7e8669d.chunk.js
7:33:19 PM: 1.9 KB build/static/js/runtime-main.24311c8a.js
7:33:19 PM: 1.86 KB build/static/js/25.cb863831.chunk.js
7:33:19 PM: 1.72 KB build/static/js/29.80d7dfb9.chunk.js
7:33:19 PM: 1.72 KB build/static/js/20.09f3083d.chunk.js
7:33:19 PM: 1.66 KB build/static/js/31.02b0937a.chunk.js
7:33:19 PM: 1.59 KB build/static/js/38.fdd85808.chunk.js
7:33:19 PM: 1.59 KB build/static/js/18.5158eeb6.chunk.js
7:33:19 PM: 1.52 KB build/static/js/23.91e0a578.chunk.js
7:33:19 PM: 1.47 KB build/static/js/36.a340c54a.chunk.js
7:33:19 PM: 1.46 KB build/static/js/21.3f3134e1.chunk.js
7:33:19 PM: 1.31 KB build/static/css/11.73a982eb.chunk.css
7:33:19 PM: 1.19 KB build/static/js/24.83183383.chunk.js
7:33:19 PM: 1.18 KB build/static/js/34.c3be2e98.chunk.js
7:33:19 PM: 1.15 KB build/static/js/22.556f5a56.chunk.js
7:33:19 PM: 1.1 KB build/static/js/33.ad8d2bb7.chunk.js
7:33:19 PM: 1.07 KB build/static/css/4.72dcd899.chunk.css
7:33:19 PM: 1.04 KB build/static/js/39.faa2fe3c.chunk.js
7:33:19 PM: 1002 B build/static/js/27.7038cb0c.chunk.js
7:33:19 PM: 947 B build/static/js/32.9fc38267.chunk.js
7:33:19 PM: 891 B build/static/js/30.8a7857e7.chunk.js
7:33:19 PM: 847 B build/static/js/28.37ff1ad1.chunk.js
7:33:19 PM: 697 B build/static/css/15.0d8cb1d1.chunk.css
7:33:19 PM: 389 B build/static/css/main.b1f87a19.chunk.css
7:33:19 PM: 292 B build/static/js/35.f509c0ae.chunk.js

Which is a massive difference.

It only took adding a couple of lazy components to get rid of the error and once I translated them all its made my biggest chunk half the size.

[chanan]

I made the same change to load the routes using React.Lazy, but I still have the error sadly.

EDIT: Strange I just looked at my build output, and I dont have all those small chunks even though I am using lazy routing as well:

637.34 KB (+88 B) build\static\js\155.5154fc55.chunk.js
 63.52 KB build\static\js\159.768d4811.chunk.js
 19.48 KB build\static\js\157.913aa113.chunk.js
 11.56 KB build\static\js\156.6ba34070.chunk.js
 9.44 KB build\static\js\main.a340dd1c.chunk.js

EDIT 2: I only have 5 routes. But that doesnt explain why the main one is 637KB, also either way it should be 3.87 MB anyway, which is what the error message is saying.

[dlech]

FYI, it looks like this is addressed in #10048.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[geekinate1]

Facing the same issues in deploying the app on netlify

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.