3

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'))
halfer
  • 19,824
  • 17
  • 99
  • 186
Andrey Radkevich
  • 3,012
  • 5
  • 25
  • 57

0 Answers0