Static keys for vendor bundle in asset-manifest.json

[benknight]

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]

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]

Considering the use case mentioned in #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]

I ended up parsing asset-manifest.json like this to compile a list of <script> tags to include:

// node
const assets = readFileAsync('build/asset-manifest.json').then(buffer => JSON.parse(buffer.toString()));

const scriptsTmpl = paths => paths.map(path => `<script src="${path}"></script>`).join('\n');

const scriptPaths = [
  assets['runtime~main.js'],
  ...Object.keys(assets)
    .filter(key => key.endsWith('.chunk.js'))
    .map(key => assets[key]),
  assets['main.js'],
];

const scriptsHTML = scriptsTmpl(scriptPaths);

[jbach]

But wouldn’t that defeat the purpose of chunks, as you are loading ALL chunks? The problem is that the main.js chunk might depend on SOME chunks, but not necessarily all of them. In your case, you only have one other chunk, so the problem is not really visible.

[Zemelia]

Hello, have same issue.
We have hashed keys due configs in webpack.config.prod.js, where name is 'false'.
splitChunks: { chunks: 'all', name: false, },
When I change this to true, I get normal names, so I can get vendors~main.js from asset-manifest.json

Can be used next workaround within https://www.npmjs.com/package/@craco/craco

// craco.config.js
module.exports = function({env}) {
  if (env === 'production') {
    return {
      plugins: [
        {
          plugin: {
            overrideWebpackConfig: ({ webpackConfig}) => {
              webpackConfig.optimization.splitChunks.name = true;
              return webpackConfig;
            },
          },
          options: {}
        }
      ]
    };
  }
  return {};
};