perf: minify html; inject css to index.html

index.html

@@ -31,6 +31,11 @@
       );
     </script>
 
+    <!-- Inject main styles to index.html -->
+    <style>
+      @import "/src/app/styles.css";
+    </style>
+
     <!-- The app entrypoint -->
     <script type="module" src="/src/app/entry-client.tsx"></script>
   </head>

package.json

@@ -75,6 +75,7 @@
     "typescript-eslint": "^8.7.0",
     "usehooks-ts": "^3.1.0",
     "vite": "^5.4.7",
+    "vite-plugin-minify": "^2.0.0",
     "vite-plugin-pwa": "^0.20.5",
     "vite-tsconfig-paths": "^5.0.1",
     "workbox-window": "^7.1.0",

src/app/app.tsx

@@ -1,5 +1,3 @@
-import "./styles.css";
-
 import { queryClient } from "@/app/query-client.ts";
 import { AuthManager } from "@/lib/auth/AuthManager.tsx";
 import { useMe } from "@/lib/auth/user.ts";

src/components/search/MoodleUrlPreview.tsx

@@ -8,7 +8,7 @@ export declare type MoodleUrlPreviewProps = {
 export default function MoodleUrlPreview({ source }: MoodleUrlPreviewProps) {
   return (
     <>
-      <div className="custom-preview-scrollbar flex h-[400px] w-full items-center justify-center overflow-hidden rounded-2xl shadow-lg">
+      <div className="flex h-[400px] w-full items-center justify-center overflow-hidden rounded-2xl shadow-lg">
         <a
           href={source.url}
           className="flex flex-row items-center justify-center gap-2 hover:text-secondary-hover"

src/components/search/PdfPreview.tsx

@@ -89,7 +89,7 @@ export default function PdfPreview({ source, searchText }: PdfPreviewProps) {
       >
         {pdfDocument !== null && (
           <div className="flex items-center justify-center">
-            <div className="custom-preview-scrollbar overflow-hidden rounded-2xl shadow-lg">
+            <div className="overflow-hidden rounded-2xl shadow-lg">
               <Page
                 noData={
                   <div

src/components/search/SearchField.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import "./search.css";
 
 export default function SearchField({
   runSearch,

src/components/search/TelegramPreview.tsx

@@ -43,10 +43,5 @@ export default function TelegramPreview({ source }: TelegramPreviewProps) {
     };
   }, [isDarkMode, source.link]);
 
-  return (
-    <div
-      ref={ref}
-      className="custom-preview-scrollbar overflow-auto rounded-lg shadow-lg"
-    />
-  );
+  return <div ref={ref} className="overflow-auto rounded-lg shadow-lg" />;
 }

vite.config.ts

@@ -1,6 +1,7 @@
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
 import viteReact from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import { ViteMinifyPlugin } from "vite-plugin-minify";
 import { VitePWA } from "vite-plugin-pwa";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { version } from "./package.json";
@@ -32,6 +33,9 @@ export default defineConfig({
       },
       manifest: false, // Manifest is already in public/manifest.json
     }),
+
+    // Minify the index.html
+    ViteMinifyPlugin({}),
   ],
 
   define: {