Duplicated prefetch link (with SSR)
See original GitHub issueI’m creating a component
chunk that needs to be prefetched.
I’m rendering the prefetch
link on SSR for component
chunk through ChunkExtractorManager
// loadableComponents.js
const LoadableLibrary = loadable.lib(() => import(
/* webpackChunkName: "component" */
/* webpackPrefetch: true */
'external-library',
));
export const ExampleComponent = props => (
<LoadableLibrary>
{({ default: Component }) => <Component {...props} />}
</LoadableLibrary>
);
// renderer.js
const extractor = new ChunkExtractor({ statsFile, entrypoints: ['client'] });
const content = (
<ChunkExtractorManager extractor={extractor}>
{ /* content management */ }
</ChunkExtractorManager>
);
const linkTags = renderToStaticMarkup(extractor.getLinkElements());
return `
<!DOCTYPE html>
<html>
<head>
${linkTags}
</head>
<body>
<div id="root">${content}</div>
</body>
<!-- bundle script -->
</html>
`;
After the client receives the template, and the browser evaluates my bundle.js
, webpack runtime finds those dynamic imports and add again the prefetch
link for script.js
, causing:
- duplicated prefetch link tags
- another fired request for the same resource.
Is this the correct behavior? Am I missing something?
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
Duplicated prefetch link (with SSR) · Issue #247 - GitHub
I'm rendering the prefetch link on SSR for component chunk through ChunkExtractorManager // loadableComponents.js const LoadableLibrary ...
Read more >Next.js sends duplicate (redundant) chunks - Stack Overflow
I experience an issue in my web app, where 80% of the .js chunks are loaded twice, redundantly without a clear reason.
Read more >Improving performance in Apollo Client - Apollo GraphQL Docs
Prefetching involves executing queries for data before that data needs to be rendered. It helps your application's UI feel more responsive to the...
Read more >PreFetch Feature - Quasar Framework
The PreFetch is a feature (only available when using Quasar CLI) which allows the components picked up by Vue Router (defined in /src/router/routes.js...
Read more >Data Pre-Fetching and State - Vue SSR Guide
On the server, we can pre-fetch and fill data into the store while rendering. In addition, we will serialize and inline the state...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Facing same issue. Most probably a webpack issue only. But very difficult to get a way around. In all cases I’m having
extractor.getLinkTags()
inserted in htmlWith prefetch magic comment
loadable-components
preloading the chunks.loadable-components
also takes prefetch magic comment and inserts them as prefetchHaving preload magic comment instead of prefetch
Without any magic comment
Is there any way to figure this out, or otherwise manually can add prefetch links for desired routes based on their corresponding generated chunks. But that’s one ugly approach I wanted to keep for last ?
Its also possible to filter out which files that should be listed for prefetch like this: