How to preload script using integrity and crossorigin

问题

I wish to use preload for my Jquery libs and use the following code.

<link rel="preload" href="https://code.jquery.com/jquery-3.4.0.slim.min.js" as="script" integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI="
  crossorigin="anonymous">

<script
  src="https://code.jquery.com/jquery-3.4.0.slim.min.js"
  integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI="
  crossorigin="anonymous"></script>

However this always generates the following warnings within chrome.

1. A preload for 'https://code.jquery.com/jquery-3.4.0.slim.min.js' is found, but is not used due to an integrity mismatch.

2. The resource https://code.jquery.com/jquery-3.4.0.slim.min.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The code below will work fine if I use the standard implementation.

<link rel="preload" href="https://code.jquery.com/jquery-3.4.0.slim.min.js" as="script">

<script>
  src="https://code.jquery.com/jquery-3.4.0.slim.min.js"
</script>

So my question is can I preload external libs and use the crossorigin and integrity (Subresource Integrity) as well?

Thanks

回答1:

Short answer: You can't.

Resources with an integrity attribute can’t reuse preloaded resources (for now) and can also cause double fetches. The integrity attribute for link elements has not yet been implemented and there’s an open spec issue about it. This means the presence of any integrity metadata will currently discard preloaded resources. In the wild, it can also result in duplicate requests where you have to make a trade-off between security and performance.

来源：https://stackoverflow.com/questions/55882909/how-to-preload-script-using-integrity-and-crossorigin