Skip to content

Integrate webpack's native prefetch/preload support

Mike Greiling requested to merge add-prefetch-preload-support into master

This is a follow-up to !17218 (merged) which adds support for /* webpackPrefetch: true */ and /* webpackPreload: true */ magic comments.

Before:

import(/* webpackChunkName: projects_dropdown */ './projects_dropdown');
<script src="/assets/webpack/runtime.bundle.js" defer="defer"></script>
<script src="/assets/webpack/main.chunk.js" defer="defer"></script>
<script src="/assets/webpack/default.chunk.js" defer="defer"></script>

After:

import(/* webpackChunkName: projects_dropdown, webpackPreload: true */ './projects_dropdown');
<script src="/assets/webpack/runtime.bundle.js" defer="defer"></script>
<script src="/assets/webpack/main.chunk.js" defer="defer"></script>
<script src="/assets/webpack/default.chunk.js" defer="defer"></script>
<link href="/assets/webpack/projects_dropdown.chunk.js" rel="preload" as="script"></link>

Performance Comparison

The same Chrome cold-cache with simulated network latency is used in both examples below:

without prefetch with prefetch
projects-dropdown-no-prefetch projects-dropdown-prefetch
Edited by Mike Greiling

Merge request reports