Summary

close #11907

This is not a issue only affect the css extract plugin. In the runtime, when adding the SRI attribute to <link>/<script> tags, the only parameter is the chunkId. So, if a chunk contains multiple asset files, similar issues may occur. I tested both experiments.css and the mini-css-extract-plugin in webpack-subresource-integrity plugin and encountered the same issue: the hash of the css chunk overrides the hash of the js chunk, causing the js to fail to load and report an SRI error. And also, experiments.css and mini-css-extract-plugin can be used at the same time.

Since the overall processing of SRI can be roughly divided into three steps (for dynamically loaded chunks):

1. Add a runtime module and inject SRI variables and hash placeholders for chunks in its code generation.
2. In the processAssets hook, calculate the hash of the chunk assets based on the asset source and replace the placeholders.
3. Insert code that modify the SRI attribute in each runtime where <script> and <link> tags are created

Therefore:

1. Regarding step 1, if a chunk contains multiple asset files, different placeholders need to be generated for each chunk asset to prevent hashes from overwriting each other. Thus, it is necessary to handle them separately according to the sourceType of the chunk's modules.
2. Regarding step 2, since only the asset.source and asset.info are available when processing assets, and it is no longer possible to tell which sourceType it was generated from, it is necessary to add an assetType in each render_manifest for differentiation. When calculating the hash and replacing, use the assetType to generate the placeholder, so as to correctly index the placeholder generated in step 1.
3. Regarding step 3, since createLink/linkPrefetch/linkPreload hooks have been implemented in the css loading runtime module and css extract loading runtime module in the previous PR, the code can be modified through them. However, the hook of the css extract plugin is not exposed separately in rspack. Therefore, when handling links, the following judgments are needed:
   • For createLink hook, it is necessary to distinguish between experiments css and css extract according to the original code.
   • For linkPreload hook, since js also needs preloading, additional handling for js is also required according to link.as.

As for the way to store hashes, they can be placed in a map and differentiated by using an id prefix, or they can be placed in different maps. Essentially, there is no difference. Here, multiple different maps for storage is chosen.

Related links

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).