Add link=preload support

[TheRoadyBuddha]

This PR contains a:

• [ ] bugfix
• [X] new feature
• [ ] code refactor
• [ ] test update
• [ ] typo fix
• [ ] metadata update

Motivation / Use-Case

This pull request adds <link rel="preload"> support, per this issue: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/142.

This is to support recent changes in Chrome Lighthouse that strongly hurt performance scores due to not using rel="preload" with asynchronous chunks, as well as improve page load performance. (More details provided https://developers.google.com/web/tools/lighthouse/audits/preload).

Fallbacks are provided for all browsers that do not support rel="preload".

Breaking Changes

No breaking changes.

Additional Info

[jsf-clabot]

Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

jgillespie seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.

[alexander-akait]

@TheRoadyBuddha Thanks for PR,

that strongly hurt performance scores due to not using rel="preload" with asynchronous chunks

i think we should do preload for async chunk always (without options), can you provide link on documentation

Other solution use webpack comments for async chunk and get information about preload, as we do in webpack for js https://webpack.js.org/guides/code-splitting/#prefetching-preloading-modules

Also please accept CLA and add tests

[TheRoadyBuddha]

@evilebottnawi Documentation has been changed, CLA signed, and now preload is the default behavior for any browser that supports it. On the tests, all the existing tests pass (the failing CI test above has to do with an npm vulnerability not related to this PR). I'm struggling to find a test for this that doesn't replicate a test that is already in this test suite, since the behavior should mirror master today. Was there something specific you had in mind?

[alexander-akait]

You need add new test for new feature

[alexander-akait]

Also please read https://github.com/webpack-contrib/mini-css-extract-plugin/pull/344#issuecomment-457306689

[wietsedevries]

@TheRoadyBuddha This would be such a great feature and you're almost there! Don't give up 🥇

[simonjoom]

Thanks working for me in my repo, and pass the lighthouse error :) it should to be merged i think ?no? for info i use gatsby i just changed the core of minicss-extract-plugin to match this patch.

[TheRoadyBuddha]

Thanks for your interest. I just need to add tests. My schedule has been a little hectic. This has been used in a production environment for a while so it is very stable. I hope to circle back and wrap this up within a week.

[TotallWAR]

Any updates?

[jglesner]

+1 would really like to have this feature

[TheRoadyBuddha]

@evilebottnawi I've added the appropriate test updates. rel="preload" is the default behavior (it will still fall back to the original behavior in older browsers. I've also singed the CLA and all linting passes locally. Let me know if you have any questions. Better late than never on this one!

[TheRoadyBuddha]

Hi there, is there anything additional that needs to be done to get this merged?

[rzemk]

I've been quietly following this, is there anything needed to get this merged and released?

[tamebadger]

what @rzemk said ^ would be really nice to get this in or https://github.com/webpack-contrib/mini-css-extract-plugin/pull/488

[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)
        }
      })

[PodaruDragos]

hello guys !! @TheRoadyBuddha @alexander-akait is there any way we can rebase and land this ? does things still need to be done here ?