Merge pull request #3879 from IgniteUI/pmoleri/improve-spa-caching

Improve SPA caching

Author: turbobobbytraykov

projects/app-crm/web.config

@@ -15,6 +15,7 @@
             <add enabled="true" mimeType="message/*"/>
             <add enabled="true" mimeType="application/javascript"/>
             <add enabled="true" mimeType="application/json"/>
+            <add enabled="true" mimeType="image/svg+xml"/>
             <add enabled="false" mimeType="*/*"/>
         </staticTypes>
     </httpCompression>
@@ -29,9 +30,26 @@
         <action type="Rewrite" url="/angular-demos/" />
       </rule>
     </rules>
+    <outboundRules>
+      <rule name="Cache immutable files" preCondition="IsImmutable">
+        <match serverVariable="RESPONSE_Cache-Control" pattern=".*" />
+        <action type="Rewrite" value="public, max-age=31536000, immutable" />
+      </rule>
+      <preConditions>
+        <preCondition name="IsImmutable" logicalGrouping="MatchAny">
+          <add input="{REQUEST_URI}" pattern="styles-.*\.css$" />
+          <add input="{REQUEST_URI}" pattern="chunk-.*\.js$" />
+          <add input="{REQUEST_URI}" pattern="main-.*\.js$" />
+          <add input="{REQUEST_URI}" pattern="polyfills-.*\.js$" />
+          <add input="{REQUEST_URI}" pattern="/media/.*" />
+        </preCondition>
+      </preConditions>
+    </outboundRules>
   </rewrite>
   <staticContent>
-    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
+    <!-- 1 hour public cache for regular static assets -->
+    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="0.01:00:00" cacheControlCustom="public" />
+
     <remove fileExtension=".json" />
     <remove fileExtension=".csv" />
     <remove fileExtension=".shp" />
@@ -52,4 +70,12 @@
       </customHeaders>
   </httpProtocol>
 </system.webServer>
+<location path="index.html">
+  <system.webServer>
+    <staticContent>
+      <!-- Short-lived cache for index.html -->
+      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="0.00:05:00" cacheControlCustom="public" />
+    </staticContent>
+  </system.webServer>
+</location>
 </configuration>

web.config

@@ -15,6 +15,7 @@
             <add enabled="true" mimeType="message/*"/>
             <add enabled="true" mimeType="application/javascript"/>
             <add enabled="true" mimeType="application/json"/>
+            <add enabled="true" mimeType="image/svg+xml"/>
             <add enabled="false" mimeType="*/*"/>
         </staticTypes>
     </httpCompression>
@@ -31,11 +32,28 @@
       <rule name="Angular Root Redirect" enabled="true" stopProcessing="true">
         <match url="^/?$" />
         <action type="Redirect" url="/products/ignite-ui-angular/getting-started" redirectType="Permanent" />
-    </rule>
+      </rule>
     </rules>
+    <outboundRules>
+      <rule name="Cache immutable files" preCondition="IsImmutable">
+        <match serverVariable="RESPONSE_Cache-Control" pattern=".*" />
+        <action type="Rewrite" value="public, max-age=31536000, immutable" />
+      </rule>
+      <preConditions>
+        <preCondition name="IsImmutable" logicalGrouping="MatchAny">
+          <add input="{REQUEST_URI}" pattern="styles-.*\.css$" />
+          <add input="{REQUEST_URI}" pattern="chunk-.*\.js$" />
+          <add input="{REQUEST_URI}" pattern="main-.*\.js$" />
+          <add input="{REQUEST_URI}" pattern="polyfills-.*\.js$" />
+          <add input="{REQUEST_URI}" pattern="/media/.*" />
+        </preCondition>
+      </preConditions>
+    </outboundRules>
   </rewrite>
   <staticContent>
-    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
+    <!-- 1 hour public cache for regular static assets -->
+    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="0.01:00:00" cacheControlCustom="public" />
+
     <remove fileExtension=".json" />
     <remove fileExtension=".csv" />
     <remove fileExtension=".shp" />
@@ -56,4 +74,12 @@
       </customHeaders>
   </httpProtocol>
 </system.webServer>
+<location path="index.html">
+  <system.webServer>
+    <staticContent>
+      <!-- Short-lived cache for index.html -->
+      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="0.00:05:00" cacheControlCustom="public" />
+    </staticContent>
+  </system.webServer>
+</location>
 </configuration>