ChunkExtractor loads more chunks than necessary

💬 Questions and Help

Hi, I am experiencing an issue with code-splitting and server-side rendering where ChunkExtractor loads a lot of extra chunks upon page load rather than just the chunk the view requires.

(Almost all of these chunks are for other unrelated views):

This issue occurs on both development and production and the behaviour is similar whether we use ChunkExtractorManager or collectChunks. This is how we do it at the moment:

import { ChunkExtractor } from '@loadable/server'

...

const statsFile = './home/deploy/razzle/build/loadable-stats.json' 
const extractor = new ChunkExtractor({ statsFile, entrypoints: ['client'] })

...

const server = express()
server.
    ...
    .get('/*', async (req, res) => {
        ...
        const app = (
            <CookiesProvider cookies={req.universalCookies}>
                <ApolloProvider client={client}>
                     <StaticRouter context={context} location={req.url}>
                         <App />
                     </StaticRouter>
                </ApolloProvider>
             </CookiesProvider>
         )

        getDataFromTree(app)
            .then(() => {

                ...
                html = renderToString(extractor.collectChunks(app))
                ...

[gregberge]

I got it, you have to create a new ChunkExtractor for every request. Then it will collect only chunks for current rendering.

[gregberge]

Good to know!