Extract chunk data from a Webpack stats JSON file and convert into HTML tags for injection in server-side rendered markup.
The motivation for creating this package was to assist in injecting <link rel="preload" /> HTML elements on SSR. This allows maximum performance when code-splitting at a route level.
You'll need access to your Webpack stats as a JSON file. There is several ways to do this:
- Use webpack-stats-disk-plugin
- Use webpack-stats-plugin if you don't SSR in your development environment
- Pass
--json > <filename>.jsonvia webpack CLI commands, see official docs.
// Pass a relative path to where your stats file will be output.
// By default, this is in the output.path folder set in your webpack config.
const Loader = new StatsLoader('./static/stats.json');
// Grabs an array of all assets required to SSR the page.
// All entry points assets will be added.
// Optionally, pass in a chunkName and those assets will be added to.
const assets = Loader.getElements(chunkName);
// Use the assets array to build HTML strings for rendering, e.g:
const headHtml = `
<head>
${assets.map(asset =>
`<link rel="preload" as="${asset.as}" href="${asset.href}" />`
).join('\n')}
${assets.filter(asset => asset.as === 'style').map(asset =>
`<link rel="stylesheet" href=${asset.href} />`
).join('\n')}
</head>
`
const bodyFooterHtml = `
${assets.filter(asset => asset.as === 'script').map(asset =>
`<script async src=${asset.href}></script>`
).join('\n')}
`;