facebook/create-react-app

Make chunking toggleable

tbillington opened this issue · 7 comments

tbillington commented

Is this a bug report?

Yes

Steps to Reproduce

react-scripts at 2.0.0-next.66cc7a90. No dynamic imports in code.

Build output had no chunks:

File sizes after gzip:

  107.09 KB (+1.2 KB)  build/static/js/main.cd7fd363.js
  305 B (+126 B)       build/static/css/main.a308f785.css

Change react-scripts to 2.0.0-next.3e165448.

Run Yarn, build app.

File sizes after gzip:

  99.7 KB               build/static/js/vendors.7dcb2806.chunk.js
  2.94 KB (-104.15 KB)  build/static/js/main.b3946f9a.chunk.js
  617 B                 build/static/js/runtime~main.41117e05.js
  252 B (-53 B)         build/static/css/main.fd7b7d90.chunk.css

Expected Behavior

Same output structure.

Actual Behavior

Different output structure.

The change identified in the react scripts 2.0 github issue didn't mention any changes to the default build process so I'm under the assumption that this build output is a bug.

bugzpodder commented

I do believe we split vendor and main bundles by default in the current webpack 4 config:
https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/config/webpack.config.prod.js#L159

tbillington commented

@bugzpodder Is this going to be configurable? Looks hardcoded at the moment.

Single JS & CSS file installs have been invaluable for my use case.

  • 👍3
bugzpodder commented

@tbillington currently this is not configurable. Can you elaborate on why having an extra js file would be cause an headache?

tbillington commented

Sure. I work on lots of projects that involve the JS I write (wrapped in CRA) being embedded within existing plain server rendered sites managed by third parties. With the current react-scripts 1 behaviour this is super easy, I can just build the files and hand them over to the site owner without needing to know where they'll be hosted (setting package.json homepage field). The only 2 file output is also super handy, there's much less to worry about. With GZIP the sizes aren't an issue, but having handfuls of files with a required name is annoying.

In short:

  • Only 2 file handover (JS & CSS, or just JS if using CSS in JS !) of built assets to third party is a win 👍
  • Not caring about hosting/url location including filename, customers often want to rename the files

Can expand on this if you want but that's the gist.

  • 👍18
Timer commented

Can you tell me if the proposal in #4633 (comment) would satisfy your use case?

tbillington commented

@Timer That seems reasonable, though I'm certainly no expert on dynamic imports 😅

vonkanehoffen commented

I don't see how #5030 closed this? I have the same issue as @tbillington where I need to supply single JS & CSS files, which there doesn't seem to be a way to do in CRA v2. #5030 just talked about how the chunks are organised, not disabling the process altogether. Am I missing something?

  • 👍8