Loadable-components: ChunkExtractor loads more chunks than necessary

[kronosfere]

💬 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]

Hello @kronosfere, did you use "webpackPrefetch" or something like that? Can you tell me if you see scripts in the HTML generated from the server?

[kronosfere]

Thanks for the quick reply @neoziro ! No, we are not using any prefetching. There are script tags generated from the server and they correspond to each of the chunks loaded,

<script async data-chunk="<chunkname>" src="<CDN link>"></script>

[gregberge]

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

[kronosfere]

Sorry for taking so long to reply, finally managed to get back to that part of the project, and yes that was the issue. Thanks!

[gregberge]

Good to know!