Skip to content

feat: add webpackPrefetch/webpackPreload/webpackFetchPriority support for URL-based assets #19695

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

feat: add webpackPrefetch/webpackPreload/webpackFetchPriority support for URL-based assets #19695

wants to merge 16 commits into from
+707 −19

Conversation

3ru
Copy link
Contributor

@3ru 3ru commented Jul 13, 2025 •
edited
Loading

PR Description

This PR refreshes prefetch/preload support across Worker chunks and new URL() assets, aligns the behavior with dynamic import(), and introduces new runtime helpers.

fixes

What kind of change does this PR introduce?

Adds magic comment support to configure resource hints:

  • Worker chunks (numeric ordering + fetch priority)
  • new URL() assets (boolean flags + fetch priority)
  • Introduces runtime helpers to inject <link> elements at runtime:
  • prefetchAsset and preloadAsset

Supported magic comments

  • Worker chunks (new Worker / SharedWorker / service worker register):
    • /* webpackPrefetch: true | number */
    • /* webpackPreload: true | number */
    • /* webpackFetchPriority: "high" | "low" | "auto" */
  • new URL() assets:
    • /* webpackPrefetch: true */
    • /* webpackPreload: true */
    • /* webpackFetchPriority: "high" | "low" | "auto" */
      Notes:
  • Worker accepts number ordering (same as import()), URL assets do not.
  • Warnings are emitted for invalid values.

Example Usage

// Prefetch an asset for future use
const imageUrl = new URL(
  /* webpackPrefetch: true */
  './assets/hero.jpg',
  import.meta.url
);

// Preload with high priority
const criticalFont = new URL(
  /* webpackPreload: true */
  /* webpackFetchPriority: "high" */
  './fonts/main.woff2',
  import.meta.url
);

// Works with Worker syntax
const worker = new Worker(
  new URL(
    /* webpackPrefetch: true */
    './heavy-computation.worker.js',
    import.meta.url
  )
);

Did you add tests for your changes?

Yes

Does this PR introduce a breaking change?

No

What needs to be documented once your changes are merged?

  • Worker: true | number for webpackPrefetch/webpackPreload, fetchpriority supported.
  • URL: boolean-only prefetch/preload, fetchpriority supported, as auto-detected.

rel

@codspeed-hq CodSpeed HQ
Copy link

codspeed-hq bot commented Jul 13, 2025 •
edited
Loading

CodSpeed Performance Report

Merging #19695 will degrade performances by 45.08%

Comparing 3ru:feature/worker-prefetch-preload-support (e7c0382) with main (12308d5)

Summary

⚡ 1 improvements
❌ 2 regressions
✅ 30 untouched benchmarks
⁉️ 9 dropped benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Benchmarks breakdown

Benchmark BASE HEAD Change
❌ benchmark "cache-filesystem", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 230.3 ms 419.3 ms -45.08%
❌ benchmark "devtool-eval", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 68.8 ms 94.3 ms -27.05%
⁉️ benchmark "lodash", scenario '{"name":"mode-development","mode":"development"}' 786.6 ms N/A N/A
⁉️ benchmark "lodash", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 67.3 ms N/A N/A
⁉️ benchmark "lodash", scenario '{"name":"mode-production","mode":"production"}' 9.6 s N/A N/A
⁉️ benchmark "many-chunks-commonjs", scenario '{"name":"mode-development","mode":"development"}' 271.2 ms N/A N/A
⁉️ benchmark "many-chunks-commonjs", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 106.7 ms N/A N/A
⁉️ benchmark "many-chunks-commonjs", scenario '{"name":"mode-production","mode":"production"}' 2 s N/A N/A
⁉️ benchmark "many-chunks-esm", scenario '{"name":"mode-development","mode":"development"}' 254.2 ms N/A N/A
⁉️ benchmark "many-chunks-esm", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 141.6 ms N/A N/A
⁉️ benchmark "many-chunks-esm", scenario '{"name":"mode-production","mode":"production"}' 2.3 s N/A N/A
⚡ benchmark "three-long", scenario '{"name":"mode-development-rebuild","mode":"development","watch":true}' 4,970.9 ms 230.8 ms ×22

@3ru 3ru force-pushed the feature/worker-prefetch-preload-support branch from 329587d to 13027da Compare July 13, 2025 08:02
alexander-akait
alexander-akait reviewed Jul 14, 2025
View reviewed changes
alexander-akait
alexander-akait reviewed Jul 18, 2025
View reviewed changes
@3ru 3ru force-pushed the feature/worker-prefetch-preload-support branch from f0ffcb7 to 2bb3de1 Compare July 21, 2025 06:39
@3ru 3ru changed the title feat: add webpackPrefetch / webpackPreload / webpackFetchPriority support for Worker syntax feat: add webpackPrefetch/webpackPreload/webpackFetchPriority support for URL-based assets Jul 21, 2025
@3ru 3ru force-pushed the feature/worker-prefetch-preload-support branch from 2bb3de1 to 3cc5c91 Compare July 21, 2025 07:07
@3ru
Copy link
Contributor Author

3ru commented Jul 21, 2025 •
edited
Loading

Standards and constraints

  • URL prefetch/preload only accept boolean true.
  • Fetch priority accepts only "high" | "low" | "auto".
  • The as attribute is auto-detected from the filename/extension (image, font, style, script, track, or fallback fetch).
  • MIME types (e.g., link.type="text/css") are intentionally not set in this PR.

Why numeric order is only for Worker (not URL)

  • Worker and dynamic import() create async chunks and chunk groups. Webpack can attach prefetchOrder/preloadOrder to these groups and deterministically schedule resource hints after the parent chunk has loaded.
  • new URL() is a single-asset link injection with no chunk graph ordering semantics. Even if Webpack tried to impose an order, browsers schedule link fetches independently, so numeric values would be misleading and fragile.
  • Therefore:
    • Worker: numeric order is meaningful and matches existing import() semantics.
    • URL: boolean-only prefetch/preload for clarity and standards alignment; use fetchpriority for relative urgency instead.

xiaoxiaojx
xiaoxiaojx reviewed Jul 26, 2025
View reviewed changes
xiaoxiaojx
xiaoxiaojx reviewed Jul 26, 2025
View reviewed changes
alexander-akait
alexander-akait reviewed Jul 26, 2025
View reviewed changes
alexander-akait
alexander-akait reviewed Jul 26, 2025
View reviewed changes
alexander-akait
alexander-akait reviewed Jul 26, 2025
View reviewed changes
xiaoxiaojx
xiaoxiaojx reviewed Jul 26, 2025
View reviewed changes
@3ru 3ru force-pushed the feature/worker-prefetch-preload-support branch 4 times, most recently from e059f1b to 9ff7ec7 Compare July 27, 2025 20:50
@3ru 3ru force-pushed the feature/worker-prefetch-preload-support branch 3 times, most recently from 036f878 to 76d6374 Compare August 10, 2025 02:26
@3ru 3ru force-pushed the feature/worker-prefetch-preload-support branch from 76d6374 to 270fdeb Compare August 10, 2025 02:50
@3ru
Copy link
Contributor Author

3ru commented Aug 10, 2025

rebased

@3ru 3ru force-pushed the feature/worker-prefetch-preload-support branch from 270fdeb to a84e769 Compare August 10, 2025 03:47
xiaoxiaojx
xiaoxiaojx reviewed Aug 10, 2025
View reviewed changes
xiaoxiaojx
xiaoxiaojx reviewed Aug 10, 2025
View reviewed changes
@3ru 3ru force-pushed the feature/worker-prefetch-preload-support branch from a84e769 to f7283bc Compare August 10, 2025 09:08
xiaoxiaojx
xiaoxiaojx reviewed Aug 10, 2025
View reviewed changes
xiaoxiaojx
xiaoxiaojx reviewed Aug 10, 2025
View reviewed changes
3ru added 2 commits August 10, 2025 12:01
@3ru
refactor: simplify asset prefetch/preload implementation
e97ae49 
- Consolidate multiple runtime modules into unified AssetResourcePrefetchPlugin
- Remove complex startup prefetch mechanism in favor of simpler inline approach
@3ru
fix: only enable URL asset prefetch/preload hints for web targets
e7c0382
@3ru 3ru force-pushed the feature/worker-prefetch-preload-support branch from f7283bc to e7c0382 Compare August 10, 2025 19:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alexander-akait alexander-akait alexander-akait left review comments

@xiaoxiaojx xiaoxiaojx xiaoxiaojx left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

support webpackPrefetch and webpackPreload for new Worker() chunk
3 participants
@3ru @alexander-akait @xiaoxiaojx