link=preload support

[Medsestrun]

No description provided.

[antonpsaputro]

I have this issue also. Latest lighthouse test recommends as such:
<link rel="preload" href="styles.css" as="style">
https://developers.google.com/web/tools/lighthouse/audits/preload

Did you find a solution @Medsestrun

[occar421]

I met this and using preload-webpack-plugin resolved it in my case.
(with include: "allAssets" and like fileWhitelist: [/styles(\.[0-9a-f]+)?\.css$/])

[dagerikhl]

Any update on this? I might be missing something and this is already possible, but if this is possible to achieve, it would be a very nice feature to have. And if it's possible without having to include other packages, that would be even better.

[samjmck]

Would love support for this.

[junibrosas]

preload-webpack-plugin is nice but will only work in tandem with html-webpack-plugin. My case is server-side rendering and I have no idea how to do it yet.

[ScriptedAlchemy]

I’ll built this soon under.

https://github.com/ScriptedAlchemy/webpack-external-import

Of course contributions are welcome

[mprochkaruk]

For those who are still waiting, there is workaround for mini-css-extract-plugin > 1.2.0 :

      new MiniCssExtractPlugin({
        ...yourConfig,
        insert: (linkTag) => {
            const preloadLinkTag = document.createElement('link')
            preloadLinkTag.rel = 'preload'
            preloadLinkTag.as = 'style'
            preloadLinkTag.href = linkTag.href
            document.head.appendChild(preloadLinkTag)
            document.head.appendChild(linkTag)
        }
      })

[SandroMiguel]

Hey @mikelpro, thank you for your solution. It works!
I just wonder why you append both <link ...> tags like this:

<link rel="preload" as="style" href="https://some-domain.local/public/css/670.css">
<link rel="stylesheet" type="text/css" href="/public/css/670.css">

[callmevladik]

Hey @mikelpro, thank you for your solution. It works!
I just wonder why you append both <link ...> tags like this:

<link rel="preload" as="style" href="https://some-domain.local/public/css/670.css">
<link rel="stylesheet" type="text/css" href="/public/css/670.css">

Because rel="preload" just tells browser which resource should be available as soon as it is required for the rendering(like priority) and rel="stylesheet" actually loads this resource

[Kirsten1996]

Hi guys,

I'm using the razzle after js boilerplate and have been running into the preload key requests when trying to improve optimization, I'm using uglifyjs and mini css extract plugin and have added the above fix to my razzle.config file

new MiniCssExtractPlugin({
filename: '[name].css',
insert: function (linkTag) {
const preloadLinkTag = document.createElement('link')
preloadLinkTag.rel = 'preload'
preloadLinkTag.as = 'style'
preloadLinkTag.href = linkTag.href
document.head.appendChild(preloadLinkTag)
document.head.appendChild(linkTag)
}
}),

However I'm not able to see where the preloaded chunks are being injected into the head, I only see the initial rel="stylesheet"

I'm using:

• "mini-css-extract-plugin": "^1.2.0",
• "uglifyjs-webpack-plugin": "^2.2.0"

Am I missing something in my configuration?

[grybykm]

@Kirsten1996 it doesn't work for me as well. Looks like the insert function is ignored or doesn't work in mini-css-extract-plugin