Use different build path for icons, cache them

public/sw.js

@@ -33,6 +33,27 @@ const imageRoute = new Route(
 );
 registerRoute(imageRoute);
 
+const iconsRoute = new Route(
+  ({ request, sameOrigin }) => {
+    const isIcon = request.url.includes('/icons/');
+    return sameOrigin && isIcon;
+  },
+  new CacheFirst({
+    cacheName: 'icons',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 50,
+        maxAgeSeconds: 3 * 24 * 60 * 60, // 3 days
+        purgeOnQuotaError: true,
+      }),
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+    ],
+  }),
+);
+registerRoute(iconsRoute);
+
 // 1-day cache for
 // - /api/v1/instance
 // - /api/v1/custom_emojis

vite.config.js

@@ -94,6 +94,15 @@ export default defineConfig({
         main: resolve(__dirname, 'index.html'),
         compose: resolve(__dirname, 'compose/index.html'),
       },
+      output: {
+        chunkFileNames: (chunkInfo) => {
+          const { facadeModuleId } = chunkInfo;
+          if (facadeModuleId && facadeModuleId.includes('icon')) {
+            return 'assets/icons/[name]-[hash].js';
+          }
+          return 'assets/[name]-[hash].js';
+        },
+      },
     },
   },
 });