Create-react-app: Static keys for vendor bundle in asset-manifest.json

Created on 2 Oct 2018  路  5Comments  路  Source: facebook/create-react-app

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 [email protected]

proposal

Most helpful comment

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.

All 5 comments

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.

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.

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