@loadable/server

ChunkExtractor

Used to collect chunks server-side and get them as script tags or script elements.

ArgumentsDescription
optionsAn object options.
options.statsFileStats file path generated using @loadable/webpack-plugin.
options.statsStats generated using @loadable/webpack-plugin.
options.entrypointsWebpack entrypoints to load (default to ["main"]).
options.outputPathOptional output path (only for requireEntrypoint).
options.namespaceNamespace of your application (use only if you have several React apps on the same page).
options.inputFileSystemFile system used to read files (default to fs).

You must specify either statsFile or stats to be able to use ChunkExtractor.

Using statsFile will automatically reload stats for you if they change.

import { ChunkExtractor } from '@loadable/server'
const statsFile = path.resolve('../dist/loadable-stats.json')
const chunkExtractor = new ChunkExtractor({ statsFile })

chunkExtractor.collectChunks

Wrap your application in a ChunkExtractorManager.

ArgumentsDescription
elementJSX element that will be wrapped in ChunkExtractorManager.
const app = chunkExtractor.collectChunks(<YourApp />)

chunkExtractor.requireEntrypoint

Require the entrypoint of your application as a commonjs module.

ArgumentsDescription
nameOptional name the entrypoint, default to the first one (main).
const { default: App } = chunkExtractor.requireEntrypoint()
const app = <App />

chunkExtractor.getScriptTags

Get scripts as a string of <script> tags.

ArgumentsDescription
attributes or attrFnOptional attributes added to script tags, or a function that receives a chunk and returns the attributes.
const body = `<body><div id="root">${html}</div>${chunkExtractor.getScriptTags()}</body>`

chunkExtractor.getScriptElements

Get scripts as an array of React <script> elements.

ArgumentsDescription
attributes or attrFnOptional attributes added to script elements, or a function that receives a chunk and returns the attributes.
const body = renderToString(
<body>
<div id="root" dangerouslySetInnerHtml={{ __html: html }} />
{chunkExtractor.getScriptElements()}
</body>,
)

chunkExtractor.getLinkTags

Get "prefetch" and "preload" links as a string of <link> tags.

ArgumentsDescription
attributes or attrFnOptional attributes added to link tags, or a function that receives a chunk and returns the attributes.
const head = `<head>${chunkExtractor.getLinkTags()}</head>`

chunkExtractor.getLinkElements

Get "prefetch" and "preload" links as an array of React <link> elements.

ArgumentsDescription
attributes or attrFnOptional attributes added to link elements, or a function that receives a chunk and returns the attributes.
const head = renderToString(<head>{chunkExtractor.getLinkElements()}</head>)

chunkExtractor.getStyleTags

Get style links as a string of <link> tags.

ArgumentsDescription
attributes or attrFnOptional attributes added to style tags, or a function that receives a chunk and returns the attributes.
const head = `<head>${chunkExtractor.getStyleTags()}</head>`

chunkExtractor.getStyleElements

Get style links as an array of React <link> elements.

const head = renderToString(<head>{chunkExtractor.getStyleElements()}</head>)

chunkExtractor.getInlineStyleTags

Get inline style links as a string of <link> tags (returns a promise).

ArgumentsDescription
attributes or attrFnOptional attributes added to style tags, or a function that receives a chunk and returns the attributes.
chunkExtractor.getInlineStyleTags()
.then((styleTags) => {
const head = `<head>${styleTags}</head>`
}

chunkExtractor.getInlineStyleElements

Get inline style links as an array of React <link> elements (returns a promise).

ArgumentsDescription
attributes or attrFnOptional attributes added to style elements, or a function that receives a chunk and returns the attributes.
chunkExtractor.getInlineStyleElements()
.then((styleElements) => {
const head = renderToString(<head>{styleElements}</head>)
}

chunkExtractor.getCssString

Get css as a raw string for using directly within app (e.g. in custom AMP style tag)

chunkExtractor.getCssString()
.then((cssString) => {
const head = renderToString(
<head>
<style
dangerouslySetInnerHTML={{ __html: cssString }}
/>
</head>
)
}

ChunkExtractorManager

Used to inject a ChunkExtractor in the context of your application.

import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server'
const extractor = new ChunkExtractor()
const app = (
<ChunkExtractorManager extractor={extractor}>
<YourApp />
</ChunkExtractorManager>
)