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.

[building][rollup] Modules imported to main module not appended at `rel=preload`

See original GitHub issue

When building for modern and legacy and relying on dynamic imports, it is possible to for Rollup to create a chunk that is required in both the main module and the dynamically imported module, in this case the chunk is not registered as isEntry and will not be added to the HTML via <link rel="preload" />.

Reproduction steps:

  1. Clone https://github.com/Westbrook/minesweeper/tree/2bec691f54708e3bb6eb83755139ffbd144c9a20
  2. Install with yarn
  3. Build yarn build
  4. See lack of secondary <link rel="preload" />

Expected results: The <link rel="preload" /> is available and ensures the earliest request for this asset.

Actual results: There is no <link rel="preload" /> and the developer needs to add it manually for optimal performance.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:11 (11 by maintainers)

github_iconTop GitHub Comments

1reaction
LarsDenBakkercommented, Jun 1, 2019

There is also https://developers.google.com/web/updates/2017/12/modulepreload which apparently on some browser traverses dependencies. I haven’t tried it yet

0reactions
LarsDenBakkercommented, Jun 1, 2019

Ah I see, so it was already broken 😃 Definitely an improvement then.

I think the different is that preload only preloads the network call, whereas modulepreload also parses the code (and potentially start downloading transitive dependencies?). In this case that’s not really needed

For now we can stick to preload as far as I can tell…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Preloading modules - Chrome Developers
Module preload offers a way of declaratively loading JavaScript modules ahead of time.
Read more >
Link types: preload - HTML: HyperText Markup Language | MDN
The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will ......
Read more >
Preload, prefetch and other <link> tags
<link rel="preload"> tells the browser to download and cache a resource (like a script or a stylesheet) as soon as possible.
Read more >
Preloading Strategies to Speed Up Angular App Loading Time
The main focus of this article is preloading modules. ... import { Routes, RouterModule } from '@angular/router';const routes: Routes = [
Read more >
javascript - What happen when a script is loaded as "preload ...
However this does not happen, whenever we import module's on any realm (main thread, worker thread), they execute their import's independently ...
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