Mini-css-extract-plugin: link=preload support

[Medsestrun]

[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.

[samjmckenzie]

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

[MikelPro]

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">