I've used this article to configure code splitting on server site https://loadable-components.com/docs/server-side-rendering/ .
const statsFile = path.resolve('../dist/public/loadable-stats.json')
const extractor = new ChunkExtractor({ statsFile, entrypoints: ['browser'] })
const html = ReactDOMServer.renderToString(
extractor.collectChunks(
<StaticRouter location={ctx.request.url} context={routeContext}>
<Provider store={ctx.store}>
<IntlProvider
locale={locale}
defaultLocale={locale}
onError={() => {}}
>
<MuiThemeProvider theme={theme(locale)}>
<Application dynamicData={dynamicData} />
</MuiThemeProvider>
</IntlProvider>
</Provider>
</StaticRouter>
)
)
......................
ctx.body = `<!DOCTYPE html>\n${ReactDOMServer.renderToStaticMarkup(
<Html
helmet={Helmet.renderStatic()}
window={{
__STATE__: ctx.store.getState()
}}
css={styleTags}
scripts={scriptTags}
locale={ctx.locale}
url={ctx.request.url}
dynamicData={dynamicData}
linkTags={linkTags}
>
{html}
</Html>
)}`
As I understand entry point entrypoints: ['browser']
detected , by splitted chunks , can't be detected by package, what should I do, to detect splitted chunks ? Here is how I try to import page component
const HomePage = loadable(() => import('pages/Home'))