webpack-ssr-stats-loader
Advanced tools
Extract chunk data from a Webpack stats JSON file and converting into HTML tags for injection in server-side rendered markup.
Extract chunk data from a Webpack stats JSON file and converting 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:
--json > <filename>.json via 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')}
`;
FAQs
Extract chunk data from a Webpack stats JSON file and converting into HTML tags for injection in server-side rendered markup.
We found that webpack-ssr-stats-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.