Implement/document <link rel="prefetch" for fonts and for .js files generated by code splitting feature #9929
Comments
|
I agree with this! though Parcel's development seems to be stunted right now |
|
This would be extremely useful. As a more concrete example: Let's say you have some html: <html lang="en">
<head>
<link href="/src/assets/my-css.css"/>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>and then @font-face {
font-family: "Fira Sans";
src: local("Fira Sans Regular"),
url("/src/fonts/FiraSans-Regular.woff2") format("woff2"),
url("/src/fonts/FiraSans-Regular.woff") format("woff"),
url("/src/fonts/FiraSans-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
body {
font-family: "Fira Sans";
}In generated html you will get something similar to <html lang="en">
<head>
<link href="/my-css.210620cd.css"/>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>and the following css: @font-face {
font-family: "Fira Sans";
src: local("Fira Sans Regular"),
url("FiraSans-Regular.c0cf7a86.woff2") format("woff2"),
url("FiraSans-Regular.06734e01.woff") format("woff"),
url("FiraSans-Regular.6dac1c26.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
body {
font-family: "Fira Sans";
}This causes the following request tree to be made by the browser when requesting that page: The problem here, is that the browser must make a request for However, if parcel were able to generate the following html: <html lang="en">
<head>
<link href="/my-css.210620cd.css"/>
<link rel="preload" href="/FiraSans-Regular.c0cf7a86.woff2" as="font">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>This would cause both |
|
Also, @stargazer33, I believe you meant |
and others
🙋 feature request
Parcel can generate files not listed under HTML
<head>. Examples:Fonts, like
dist/ex/bootstrap-icons.3536be6d.woff2Files created by code splitting feature: In JS code I do
typesensePromise = import('typesense')and Parcel creates
dist/ex/Typesense.dd42cc95.js167 KBI would like to see Parcel-generated prefetch links:
<link rel="prefetch" src="generated filename">for such files.
If this already possible with Parcel - I would like to read documentation about this.
Can not find it in current documentation
🤔 Expected Behavior
Parcel generates prefetch links:
<link rel="prefetch" src="generated filename">for icon fonts and JS files created by code splitting feature.
😯 Current Behavior
There are no prefetch links. Documentation does not mention this.
🔦 Context
This should improve page load speed
The text was updated successfully, but these errors were encountered: