feat: link preload support (#142)

[starksider]

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: #142.

It is also an alternative realization of #344 pull request, which is not merged and is not active last 4 months.

It was inspired by article about async css load - https://www.filamentgroup.com/lab/load-css-simpler/

Main features:

1. Browser do not block rendering while downloading css file
2. Improve load performance, improve Chrome Lighthouse score (more details at https://developers.google.com/web/tools/lighthouse/audits/preload)
3. Fallback for browsers which doesn't support <link rel="preload">. It simply uses a media type that doesn't match the current environment (<link media="print">), which doesn't block browser render while file is downloading, and changes media after file load (more details in https://www.filamentgroup.com/lab/load-css-simpler/#breaking-that-down%E2%80%A6)

New feature could be disabled by providing cssPreload: false into mini-css-extract-plugin config

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.

---

Andrii.Sas 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.

[codecov[bot]]

Codecov Report

Merging #488 into master will decrease coverage by 0.17%. The diff coverage is 50%.

@@            Coverage Diff             @@
##           master     #488      +/-   ##
==========================================
- Coverage   88.49%   88.31%   -0.18%     
==========================================
  Files           5        5              
  Lines         426      428       +2     
  Branches       94       96       +2     
==========================================
+ Hits          377      378       +1     
- Misses         47       48       +1     
  Partials        2        2

Impacted Files	Coverage Δ
src/index.js	87.5% <50%> (-0.36%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 1ffc393...116392a. Read the comment docs.

[starksider]

@evilebottnawi thanks for quick reply. As far as I know magic comments supported only for dynamic imports, but common use case of css chunk load demonstrated in exaple below, how such case should be resolved?

//entry.js
import("./a.js");

//a.js
//a source...
import "styles.css";

[sarathnairck12]

Any updates on this PR?

[zachguo]

What else needs to be done?

[manishparanjape]

Any ETA when this will be merged?

[ajones55555]

This would be helpful for us too - any updates?

[alexander-akait]

Because it is invalid solution and should be solved using /* webpackPreload *//other magick comments

[ajones55555]

@evilebottnawi I think that the Webpack comments for preload/prefetch are only available on JS modules, and don't apply to CSS chunks. https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules

Is there another path we can take to adding preload/prefetch to the tags generated by this plugin?

[tamebadger]

This would be really useful for our project, is there anything I can help with to move this along ? Or can someone please advise what is needed to merge this

[PodaruDragos]

@alexander-akait hello. Are there any plans to rework this ?

[alexander-akait]

We need rebase this PR and do some improvement, if somebody want to take it feel free and resend a PR