Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rjray opened this issue Jan 19, 2022 · 6 comments
Open

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

rjray opened this issue Jan 19, 2022 · 6 comments

Comments

@rjray
Copy link

rjray commented Jan 19, 2022

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.

@rjray
Copy link
Author

rjray commented Jan 19, 2022

This appears to be resolved by #11763.

@carlosparreno
Copy link

Hey @rjray, apparently #11763 hasn't been merged yet. So this hasn't been resolved. Could you please reopen it? Thanks a lot in advance.

@rjray
Copy link
Author

rjray commented Mar 25, 2022

The cited solution (#11763) has not been merged yet, so reopening this. We are having to use a patched version of this distribution for our builds.

@zane-programs
Copy link

zane-programs commented Apr 26, 2022

In case this helps anyone, I'm currently using react-app-rewired to override the Webpack config.

It might not be worth it if you're not already using react-app-rewired in your project (I already was), but your config-overrides.js file could implement the proposed change in #11763 like this:

module.exports = function override(config, webpackEnv) {
  config.optimization.splitChunks =
    webpackEnv === "development"
      ? undefined
      : {
          chunks: "all",
        };

  return config;
};

@Dineshchitta
Copy link

Is there any issue specified regarding this in webpack repo? or any response from webpack team?

Above one would not be permanent solution I guess

@levenecav
Copy link

I have the opposite problem, on version 5.0.1 I have an assembly with chunks and I can't remove them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants