perf: Improve caching of root js files (#17618)

atomrc · web-flow · commit b6568e15903c · 2024-06-19T15:18:52.000Z
diff --git a/server/Server.ts b/server/Server.ts
@@ -94,9 +94,13 @@ class Server {
       this.app.use(nocache());
     } else {
       this.app.use((req, res, next) => {
+        // If the user agent adds a v param, it means that its requesting a particular version of the file and that could be cached forever since the file will never change.
+        const hasCacheVersionParam = req.query.v && typeof req.query.v === 'string';
+        const oneYear = 31536000;
+        const maxAge = hasCacheVersionParam ? oneYear : this.config.CACHE_DURATION_SECONDS;
         const milliSeconds = 1000;
-        res.header('Cache-Control', `public, max-age=${this.config.CACHE_DURATION_SECONDS}`);
-        res.header('Expires', new Date(Date.now() + this.config.CACHE_DURATION_SECONDS * milliSeconds).toUTCString());
+        res.header('Cache-Control', `public, max-age=${maxAge}`);
+        res.header('Expires', new Date(Date.now() + maxAge * milliSeconds).toUTCString());
         next();
       });
     }
diff --git a/src/page/auth.ejs b/src/page/auth.ejs
@@ -19,16 +19,16 @@
 
     <title><%= BRAND_NAME %></title>
 
-    <script src="../min/basicBrowserFeatureCheck.js?<%= VERSION %>"></script>
-    <script src="../min/checkBrowser.js?<%= VERSION %>"></script>
+    <script src="../min/basicBrowserFeatureCheck.js?v=<%= VERSION %>"></script>
+    <script src="../min/checkBrowser.js?v=<%= VERSION %>"></script>
   </head>
 
   <body>
     <div id="main"></div>
-    <script src="../config.js?<%= VERSION %>"></script>
-    <script src="../min/dexie.js?<%= VERSION %>"></script>
-    <script src="../min/vendor.js?<%= VERSION %>"></script>
-    <script src="../min/runtime.js?<%= VERSION %>"></script>
-    <script src="../min/auth.js?<%= VERSION %>"></script>
+    <script src="../config.js?v=<%= VERSION %>"></script>
+    <script src="../min/dexie.js?v=<%= VERSION %>"></script>
+    <script src="../min/vendor.js?v=<%= VERSION %>"></script>
+    <script src="../min/runtime.js?v=<%= VERSION %>"></script>
+    <script src="../min/auth.js?v=<%= VERSION %>"></script>
   </body>
 </html>
diff --git a/src/page/index.ejs b/src/page/index.ejs
@@ -19,8 +19,8 @@
 
     <title><%= BRAND_NAME %></title>
 
-    <script src="./min/basicBrowserFeatureCheck.js?<%= VERSION %>"></script>
-    <script src="./min/checkBrowser.js?<%= VERSION %>"></script>
+    <script src="./min/basicBrowserFeatureCheck.js?v=<%= VERSION %>"></script>
+    <script src="./min/checkBrowser.js?v=<%= VERSION %>"></script>
   </head>
 
   <body>
@@ -88,11 +88,11 @@
         </div>
     </main>
 
-    <script src="./min/loader.js?<%= VERSION %>"></script>
-    <script src="./config.js?<%= VERSION %>"></script>
-    <script src="./min/dexie.js?<%= VERSION %>"></script>
-    <script src="./min/vendor.js?<%= VERSION %>"></script>
-    <script src="./min/runtime.js?<%= VERSION %>"></script>
-    <script src="./min/app.js?<%= VERSION %>"></script>
+    <script src="./min/loader.js?v=<%= VERSION %>"></script>
+    <script src="./config.js?v=<%= VERSION %>"></script>
+    <script src="./min/dexie.js?v=<%= VERSION %>"></script>
+    <script src="./min/vendor.js?v=<%= VERSION %>"></script>
+    <script src="./min/runtime.js?v=<%= VERSION %>"></script>
+    <script src="./min/app.js?v=<%= VERSION %>"></script>
   </body>
 </html>
