Integrate webpack's native prefetch/preload support
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 |
---|---|
Edited by Mike Greiling