Created by: samuelmeuli
Problem:
We would like to generate the index.html
file on the server. In order to get code splitting to work, we need to know which chunks are entrypoints of the React app (to be able to request these from the HTML file). Unfortunately, this currently doesn't seem to be possible (see https://github.com/facebook/create-react-app/issues/5225#issuecomment-427312764).
Ideally, splitChunks.name
would simply be set to true
in the Webpack config, so the entrypoints could be inferred from the file names. However, this seems to lead to caching issues (see https://github.com/facebook/create-react-app/pull/5030#issuecomment-422820779).
This PR implements @iansu's suggestion from https://github.com/facebook/create-react-app/issues/5513#issuecomment-486838664: It adds an additional "entrypoints"
key to the asset-manifest.json
file with the names of the files that need to be included in the generated HTML.
Before:
{
"files": {
"main.css": "/static/css/main.2cce8147.chunk.css",
"main.js": "/static/js/main.fd729682.chunk.js",
"main.js.map": "/static/js/main.fd729682.chunk.js.map",
"runtime-main.js": "/static/js/runtime-main.f7c36e2a.js",
"runtime-main.js.map": "/static/js/runtime-main.f7c36e2a.js.map",
"static/js/2.ae086021.chunk.js": "/static/js/2.ae086021.chunk.js",
"static/js/2.ae086021.chunk.js.map": "/static/js/2.ae086021.chunk.js.map",
"index.html": "/index.html",
"precache-manifest.be4e4fdd4a55417b6c618c280ec25a62.js": "/precache-manifest.be4e4fdd4a55417b6c618c280ec25a62.js",
"service-worker.js": "/service-worker.js",
"static/css/main.2cce8147.chunk.css.map": "/static/css/main.2cce8147.chunk.css.map",
"static/media/logo.svg": "/static/media/logo.5d5d9eef.svg"
}
}
After:
{
"files": {
"main.css": "/static/css/main.b100e6da.chunk.css",
"main.js": "/static/js/main.70abf459.chunk.js",
"main.js.map": "/static/js/main.70abf459.chunk.js.map",
"runtime-main.js": "/static/js/runtime-main.fdecdd6f.js",
"runtime-main.js.map": "/static/js/runtime-main.fdecdd6f.js.map",
"static/js/2.a3ab821d.chunk.js": "/static/js/2.a3ab821d.chunk.js",
"static/js/2.a3ab821d.chunk.js.map": "/static/js/2.a3ab821d.chunk.js.map",
"index.html": "/index.html",
"precache-manifest.47b41692c7614ae757144cfe8f04d3cb.js": "/precache-manifest.47b41692c7614ae757144cfe8f04d3cb.js",
"service-worker.js": "/service-worker.js",
"static/css/main.b100e6da.chunk.css.map": "/static/css/main.b100e6da.chunk.css.map",
"static/media/logo.svg": "/static/media/logo.25bf045c.svg"
},
"entrypoints": [
"static/js/runtime-main.fdecdd6f.js",
"static/js/2.a3ab821d.chunk.js",
"static/css/main.b100e6da.chunk.css",
"static/js/main.70abf459.chunk.js"
]
}
Note: This PR is a draft because it requires https://github.com/danethurber/webpack-manifest-plugin/pull/192 to be merged into webpack-manifest-plugin
first. Without that change, the information about the order in which the assets need to be included isn't available yet (see https://github.com/facebook/create-react-app/issues/5513#issuecomment-488311627).
Closes #5513 (closed)