Skip to content

react-scripts 5.0.0 build does not split resulting JavaScript bundle #11963

Open
@rjray

Description

@rjray

Describe the bug

After upgrading the react-scripts package from 4.0.3 to 5.0.0, the react-scripts build command only produces a single JavaScript file, where previously there were 3 files. Because of this, the resulting .js.map file is too large for us to version-control.

Did you try recovering your dependencies?

I have run the commands side-by-side in different copies of our source repository and confirmed that the RS 5.0.0 code is not producing comparable results to 4.0.3. In both trees, I was running against a clean re-install of all dependencies (removed node_modules and re-ran yarn install).

Which terms did you search for in User Guide?

I searched for "code splitting" and read the section on it. It implies that code-splitting is based on dynamic imports (which we are not using), but the application code itself has not changed (only the build tools).

Environment

Environment Info:

  current version of create-react-app: 5.0.0
  running from /home/rjray/.npm/_npx/20562/lib/node_modules/create-react-app

  System:
    OS: Linux 4.15 Ubuntu 16.04.7 LTS (Xenial Xerus)
    CPU: (12) x64 Intel(R) Core(TM) i7-5820K CPU @ 3.30GHz
  Binaries:
    Node: 14.18.3 - /home/linuxbrew/.linuxbrew/opt/node@14/bin/node
    Yarn: 1.22.0 - /home/linuxbrew/.linuxbrew/bin/yarn
    npm: 6.14.15 - /home/linuxbrew/.linuxbrew/opt/node@14/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Firefox: 88.0
  npmPackages:
    react: ^16.14.0 => 16.14.0 
    react-dom: ^16.14.0 => 16.14.0 
    react-scripts: ^5.0.0 => 5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

I'm not sure how to describe reproducing the problem, and I cannot share the project's package.json file as it is an internal company project.

Expected behavior

I expected it to behave identically to the 4.0.3 toolchain.

Actual behavior

When I run react-scripts build on the repo that has version 4.0.3, the resulting build/static/js directory looks like this:

$ ls -lG build/static/js
total 7400
-rw-r--r-- 1 rjray 1289088 Jan 19 09:11 2.1e43ba39.chunk.js
-rw-r--r-- 1 rjray    3423 Jan 19 09:11 2.1e43ba39.chunk.js.LICENSE.txt
-rw-r--r-- 1 rjray 5081380 Jan 19 09:11 2.1e43ba39.chunk.js.map
-rw-r--r-- 1 rjray  314529 Jan 19 09:11 main.38d92359.chunk.js
-rw-r--r-- 1 rjray  868002 Jan 19 09:11 main.38d92359.chunk.js.map
-rw-r--r-- 1 rjray    1559 Jan 19 09:11 runtime-main.5f8120df.js
-rw-r--r-- 1 rjray    8278 Jan 19 09:11 runtime-main.5f8120df.js.map

When I run the repo with the 5.0.0 toolchain, the resulting directory looks like this:

$ ls -lG build/static/js
total 6836
-rw-r--r-- 1 rjray 1484759 Jan 19 10:47 main.7f057cb8.js
-rw-r--r-- 1 rjray    2160 Jan 19 10:47 main.7f057cb8.js.LICENSE.txt
-rw-r--r-- 1 rjray 5508473 Jan 19 10:47 main.7f057cb8.js.map

Reproducible demo

I cannot, as this is an internal company application.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions