question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Preloaded js chunks not being used by browser.

See original GitHub issue

Bug report

Describe the bug

The preloaded js chunks don’t seem to be used by the browser and are redundant even with crossorigin attribute added.

Warnings:
A preload <link> was found for "https://***/_next/static/chunks/***.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preload <link> was found for "https://***/_next/static/chunks/***.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preload <link> was found for "https://***/_next/static/chunks/***.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. Build for production.
  2. Run site through lighthouse.
  3. See error

Expected behavior

A clear and concise description of what you expected to happen.

The preload link should work without any complains from lighthouse otherwise is it even called correctly?

Screenshots

If applicable, add screenshots to help explain your problem.

System information

  • Version of Next.js: [9.3.1]

Additional context

Add any other context about the problem here.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:7
  • Comments:13 (5 by maintainers)

github_iconTop GitHub Comments

github_iconTop Results From Across the Web

Code Splitting / Preloading Content while user is browsing?
Yes you can achieve this. I will show one of the possible solutions. Firstly let's create backgroundLoader for queuing required chunks:
Read more >
Preload critical assets to improve loading speed - web.dev
Because browsers don't execute preloaded files, preloading is useful to separate fetching from execution which can improve metrics such as Time ...
Read more >
<link rel=”prefetch/preload”> in webpack | by Tobias Koppers
What's the problem? The webpack runtime only takes care of prefetch/preload for on-demand-loaded chunks. When prefetch/preload is used in import ...
Read more >
Code Splitting - webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >
Lazy loading - Web performance | MDN
Lazy loading is a strategy to identify resources as non-blocking ... splitting JavaScript, CSS and HTML can be split into smaller chunks.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found