Custom cache settings for JS/CSS resources

Question

Is it possible to set the cache for JS and CSS files only based on some logic?

When the url of the assets always changes (e.g SignUp.[versiontoken].css when the content is modified) then the cache settings can be (1 year) Cache-Control: max-age=31536000

When the url is static (e.g /ui/some.css) then the cache should be short (<1day).

For the first scenario, I think is enough to add Cache-control in the web.config, but for the second one, what should I do?

<httpProtocol>
    <customHeaders>
        <remove name="Cache-Control" />
        <add name="Cache-Control" value="public, max-age=31536000" />
    </customHeaders>
</httpProtocol>

Project: Sitecore 9.3 based on Helix architecture, no SXA

Answer 1

Based on your question it seems like these are static assets on your server which are perhaps generated by a frontend build process. I'm having a similar requirement and use an outbound rewrite rule to accomplish this, see sample below. Another approach would be to set this in Application_BeginRequest.

<outboundRules>
    <rule name="Set long cache time" preCondition="SetLongCache">
        <match serverVariable="RESPONSE_cache-control" pattern="(.*)" />
        <action type="Rewrite" value="max-age=31536000" />
    </rule> 
    <preConditions>     
        <!-- Change condition to meet your requirement -->
        <preCondition name="SetLongCache" >
            <add input="{HTTP_URL}" pattern="SignUp\.(.*)\.css" />
        </preCondition>
    </preConditions>
</outboundRules>