Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save erikhansen/45e858e9579214643c0d211f9a7454e9 to your computer and use it in GitHub Desktop.
Save erikhansen/45e858e9579214643c0d211f9a7454e9 to your computer and use it in GitHub Desktop.
Script to create a useful asset-manifest file for CRA-3 that only contains paths to assets needed on page load
const fs = require('fs');
const path = require('path');
const assetManifestPath = path.join(__dirname, 'build/asset-manifest.json');
let assetManifest = fs.readFileSync(assetManifestPath);
assetManifest = JSON.parse(assetManifest)['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"
// ]
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment