Script to create a useful asset-manifest file for CRA-2 that only contains paths to assets needed on page load

createUsefulAssetManifest.js

const fs = require('fs')
const path = require('path')

// for CRA-2 un-comment line 5 and comment line 6
// const assetManifest = require('./build/asset-manifest.json')
const assetManifest = require('./build/asset-manifest.json')[files]

const indexFilePath = path.join(__dirname, 'build/index.html')

const BUILD_PATH = path.join(__dirname, 'build/useful-asset-manifest.json')

// Filter paths that exists in the create-react-app generated `build/asset-manifest.json` and use the path from that file because that can contain the "homepage" prefix from package.json.
const filterAssetManifestPaths = filePaths =>
  filePaths.reduce((y, x) => {
    Object.keys(assetManifest).forEach(key => {
      if (
        assetManifest[key].includes(x) &&
        assetManifest[key].split('.').reverse()[0] !== 'map'
      ) {
        y.push(assetManifest[key])
      }
    })
    return y
  }, [])

// Read and process the create-react-app generated `build/index.html`
fs.readFile(indexFilePath, 'utf8', (err, htmlData) => {
  if (err) {
    return console.error('err', err)
  }

  // Get array (or null) with js & css paths from the create-react-app generated `build/index.html`
  const js = htmlData.match(/(\/static\/js\/).*?(.js)/gim)
  const css = htmlData.match(/(\/static\/css\/).*?(.css)/gim)

  // Create the useful-asset-manifest.json object
  // NOTE: if you want to include the paths that don't exist in `build/asset-manifest.json` leave out `filterAssetManifestPaths(css/js)`.
  const assets = {
    css: Array.isArray(css) ? filterAssetManifestPaths(css) : [],
    js: Array.isArray(js) ? filterAssetManifestPaths(js) : [],
  }

  fs.writeFileSync(BUILD_PATH, JSON.stringify(assets))
})


// Outputs (in the correct order) something like:
// build/useful-asset-manifest.json
//
// {
//   "css": [
//     "/static/css/2.1b02c459.chunk.css",
//     "/static/css/main.f8da7d89.chunk.css"
//   ],
//   "js": [
//     "/static/js/runtime~main.3e5a2071.js",
//     "/static/js/2.5717aa4d.chunk.js",
//     "/static/js/main.8363db78.chunk.js"
//   ]
// }

@erikhansen No problem :)

1. I added the [files] suggestion by @scesbron. Now just un-comment 1 of the 2 lines of line 4-7.
2. This is actually regular JS, just without semicolons. If you want those you can beautify the script in your editor. Or leave it as is, works fine ;) Have fun with it!

@mdecorte Looks great!

Thanks for the script!
I just found out once we use code split feature (https://reactjs.org/docs/code-splitting.html), there will be an additional script line in the index.html and the app does not work without it, which means we also need to grab the whole minified script code and add it to our own html to make the app works.

<script>!function(i){function e(e){for(var t,r,n=e[0],o=e[1],a=e[2],c=0,u=[];c<n.length;c++)r=n[c],s[r]&&u.push(s[r][0]),s[r]=0;for(t in o)Object.prototype.hasOwnProperty.call(o,t)&&(i[t]=o[t]);for(h&&h(e);u.length;)u.shift()();return l.push.apply(l,a||[]),f()}function f(){for(var e,t=0;t<l.length;t++){for(var r=l[t],n=!0,o=1;o<r.length;o++){var a=r[o];0!==s[a]&&(n=!1)}n&&(l.splice(t--,1),e=p(p.s=r[0]))}return e}var r={},d={2:0},s={2:0},l=[];function p(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,p),t.l=!0,t.exports}p.e=function(l){var e=[];d[l]?e.push(d[l]):0!==d[l]&&{4:1,5:1,6:1,7:1,8:1,9:1,10:1,11:1}[l]&&e.push(d[l]=new Promise(function(e,n){for(var t="static/css/"+({}[l]||l)+"."+{0:"31d6cfe0",4:"aa1216c9",5:"ed86b553",6:"923398d8",7:"8e766d43",8:"61585836",9:"a3e69163",10:"4dcb6126",11:"fff9ec18",12:"31d6cfe0",13:"31d6cfe0",14:"31d6cfe0",15:"31d6cfe0"}[l]+".chunk.css",o=p.p+t,r=document.getElementsByTagName("link"),a=0;a<r.length;a++){var c=(i=r[a]).getAttribute("data-href")||i.getAttribute("href");if("stylesheet"===i.rel&&(c===t||c===o))return e()}var u=document.getElementsByTagName("style");for(a=0;a<u.length;a++){var i;if((c=(i=u[a]).getAttribute("data-href"))===t||c===o)return e()}var f=document.createElement("link");f.rel="stylesheet",f.type="text/css",f.onload=e,f.onerror=function(e){var t=e&&e.target&&e.target.src||o,r=new Error("Loading CSS chunk "+l+" failed.\n("+t+")");r.request=t,delete d[l],f.parentNode.removeChild(f),n(r)},f.href=o,document.getElementsByTagName("head")[0].appendChild(f)}).then(function(){d[l]=0}));var r=s[l];if(0!==r)if(r)e.push(r[2]);else{var t=new Promise(function(e,t){r=s[l]=[e,t]});e.push(r[2]=t);var n,a=document.createElement("script");a.charset="utf-8",a.timeout=120,p.nc&&a.setAttribute("nonce",p.nc),a.src=p.p+"static/js/"+({}[l]||l)+"."+{0:"c32e5a9e",4:"c0d86804",5:"ab0e257b",6:"8cad03ff",7:"d9b49386",8:"bd4ed7cc",9:"9d8a089c",10:"46e198d3",11:"1c92bbaf",12:"3292b4c9",13:"aa42f2b8",14:"a0890ec1",15:"116bd504"}[l]+".chunk.js",n=function(e){a.onerror=a.onload=null,clearTimeout(c);var t=s[l];if(0!==t){if(t){var r=e&&("load"===e.type?"missing":e.type),n=e&&e.target&&e.target.src,o=new Error("Loading chunk "+l+" failed.\n("+r+": "+n+")");o.type=r,o.request=n,t[1](o)}s[l]=void 0}};var c=setTimeout(function(){n({type:"timeout",target:a})},12e4);a.onerror=a.onload=n,document.head.appendChild(a)}return Promise.all(e)},p.m=i,p.c=r,p.d=function(e,t,r){p.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},p.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},p.t=function(t,e){if(1&e&&(t=p(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(p.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)p.d(r,n,function(e){return t[e]}.bind(null,n));return r},p.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return p.d(t,"a",t),t},p.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},p.p="/amelie/",p.oe=function(e){throw console.error(e),e};var t=window.webpackJsonp=window.webpackJsonp||[],n=t.push.bind(t);t.push=e,t=t.slice();for(var o=0;o<t.length;o++)e(t[o]);var h=n;f()}([])</script>

@wiziple No problem. This can be solved by adding INLINE_RUNTIME_CHUNK=false to your .env or as a pipeline variable. See https://facebook.github.io/create-react-app/docs/advanced-configuration (bottom part about INLINE_RUNTIME_CHUNK)

@mdecorte huh thanks! How come did i miss this? Let’s keep the comment for people like me 😆

The original Github issue 👈