Skip to content

Instantly share code, notes, and snippets.

@mdecorte
Last active July 1, 2022 06:30
Show Gist options
  • Save mdecorte/d539604286f7f15d6bc8f245a6c5c37d to your computer and use it in GitHub Desktop.
Save mdecorte/d539604286f7f15d6bc8f245a6c5c37d to your computer and use it in GitHub Desktop.
Script to create a useful asset-manifest file for CRA-2 that only contains paths to assets needed on page load
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"
// ]
// }
@wiziple
Copy link

wiziple commented Jun 26, 2019

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

@mdecorte
Copy link
Author

The original Github issue 👈

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment