facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.76k stars 26.87k forks source link

Static keys for vendor bundle in asset-manifest.json #5225

Open benknight opened 6 years ago

benknight commented 6 years ago

Currently the asset-manifest.json in my build folder looks like this:

{
  "main.css": "/static/css/main.f4f38731.chunk.css",
  "main.js": "/static/js/main.56255761.chunk.js",
  "main.js.map": "/static/js/main.56255761.chunk.js.map",
  "static/css/1.36ceda45.chunk.css": "/static/css/1.36ceda45.chunk.css",
  "static/js/1.ade53803.chunk.js": "/static/js/1.ade53803.chunk.js",
  "static/js/1.ade53803.chunk.js.map": "/static/js/1.ade53803.chunk.js.map",
  "runtime~main.js": "/static/js/runtime~main.229c360f.js",
  "runtime~main.js.map": "/static/js/runtime~main.229c360f.js.map",
  "static/media/icons.svg": "/static/media/icons.6e39cadf.svg",
  "static/media/logo.svg": "/static/media/logo.61c6330d.svg",
  "static/media/help_logo.svg": "/static/media/help_logo.1ef27f5c.svg",
  "static/media/help_logo_mark.svg": "/static/media/help_logo_mark.8265813a.svg",
  "static/media/youtube_icon.svg": "/static/media/youtube_icon.d435ea9a.svg",
  "static/media/guarantee_emblem.svg": "/static/media/guarantee_emblem.d49af9a1.svg",
  "static/css/main.f4f38731.chunk.css.map": "/static/css/main.f4f38731.chunk.css.map",
  "static/css/1.36ceda45.chunk.css.map": "/static/css/1.36ceda45.chunk.css.map",
  "index.html": "/index.html",
  "precache-manifest.be82c4ddabdcb9e12cd3d143baad1412.js": "/precache-manifest.be82c4ddabdcb9e12cd3d143baad1412.js",
  "service-worker.js": "/service-worker.js"
}

I want to be able to use this asset-manifest.json to reference and and include my own script tags. However, the vendor bundle has dynamic keys:

  "static/css/1.36ceda45.chunk.css": "/static/css/1.36ceda45.chunk.css",
  "static/js/1.ade53803.chunk.js": "/static/js/1.ade53803.chunk.js",
  "static/js/1.ade53803.chunk.js.map": "/static/js/1.ade53803.chunk.js.map",

Is it possible to make these references something like static/css/1.chunk.css instead?

Using react-scripts@2.0.3

Timer commented 6 years ago

Chunks can change at any time, adding or removing them. I'm not sure having static keys would help too much.

This file should still be easily iterable programmatically.

jbach commented 6 years ago

Considering the use case mentioned in https://github.com/facebook/create-react-app/issues/5172: Previously, I could just load the file referenced under the main.js key, thus not caring about changes.

It looks like loading an application now requires the runtime (runtime~main.js), the randomly named vendor chunk (static/js/1.ade53803.chunk.js) and the actual entry script (main.js).

How can a CRA-agnostic backend properly serve the application, if the vendor chunk is not statically keyed? Sorry, if this sounds like a dumb question.

benknight commented 6 years ago

I ended up parsing asset-manifest.json like this to compile a list of Githubissues.

  • Githubissues is a development platform for aggregating issues.