Use Vite (again) to reduce website size

Here's some data:

Netlify: Transferred 78kB JS + 5.17kB CSS / Size 255kB JS + 26kB CSS
Prev. commit: Transf. 922kB JS + 122kB CSS / Size 922kB JS + 122kB CSS
This commit: Transf. 257kB JS + 26kB CSS / Size 257kB JS + 26kB CSS

I am pretty sure I could reduce Transf. through Accept-Encoding stuff

index.html

@@ -42,6 +42,6 @@
     <div id="root">
       
     </div>
-    <script type="module" src="./App.tsx"></script>
+    <script type="module" src="./src/App.tsx"></script>
   </body>
 </html>

index.ts

@@ -49,16 +49,6 @@ const api_endpoints: Handler[] = [
   website_umami
 ];
 
-const builds = await Bun.build({
-  entrypoints: ["./src/App.tsx", "index.css"],
-  target: "browser",
-  minify: {
-    identifiers: true,
-    syntax: true,
-    whitespace: true,
-  },
-});
-
 const servers: Server[] = ports.map((port) => Bun.serve({
   idleTimeout: 30,
   // @ts-expect-error https://github.com/oven-sh/bun/issues/17772
@@ -70,7 +60,7 @@ const servers: Server[] = ports.map((port) => Bun.serve({
     // merciless sanitization
     let pathname = url.pathname;
     pathname = pathname
-      .replace(/([^A-Za-z0-9/.-_])/g, "")
+      .replace(/([^A-Za-z0-9/._-])/g, "")
       .replace(/(?<![a-zA-Z])\.(?![a-zA-Z])/g, "");
 
     if (req.method !== "GET") {
@@ -81,29 +71,16 @@ const servers: Server[] = ports.map((port) => Bun.serve({
     // MAIN PAGE
 
     if (pathname === "/") {
-      const indexContent = await Bun.file("index.html").text();
+      const indexContent = await Bun.file("./dist/index.html").text();
       return new Response(indexContent, {headers: {"Content-Type": "text/html"}});
     }
 
-    if (pathname === "/App.tsx" && req.method === "GET") {
-      return new Response(builds.outputs[0].stream(), {
-        headers: {
-          "Content-Type": builds.outputs[0].type,
-        },
-      });
-    };
-
-
     // EXTERNAL TO MAIN PAGE
 
-    if (pathname === "/index.css" && req.method === "GET") {
+    if (pathname.startsWith("/compressed")) {
-      return new Response(builds.outputs[1].stream(), {
+      const asset = Bun.file("./dist" + pathname);
-        headers: {
+      return await asset.exists() ? new Response(asset, {status: 200}) : new Response("Not Found", {status: 404});
-          "Content-Type": builds.outputs[1].type,
+    }
-        },
-      });
-    };
-
 
     if (pathname.startsWith("/assets")) {
       const asset = Bun.file("." + pathname);

package.json

@@ -1,9 +1,10 @@
 {
   "scripts": {
-    "dev": "bunx bun css && bun --hot index.ts --dev",
+    "dev": "bun css && vite build && bun --hot index.ts --dev",
-    "css": "bun tailwindcss -i ./src/App.css -o index.css",
+    "css": "tailwindcss -i ./src/App.css -o index.css",
-    "lint": "bunx eslint .",
+    "lint": "eslint .",
-    "start": "bun install && bunx bun css && bun run index.ts"
+    "getready": "bun install && bun css && vite build",
+    "start": "bun getready && bun run index.ts"
   },
   "dependencies": {
     "@bachmacintosh/wanikani-api-types": "^1.7.0",
@@ -18,24 +19,24 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.0",
-    "@eslint/js": "^9.21.0",
+    "@eslint/js": "^9.22.0",
     "@stylistic/eslint-plugin": "^3.1.0",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/postcss": "^4.0.11",
+    "@tailwindcss/postcss": "^4.0.12",
     "@types/bun": "latest",
-    "@types/node": "^20.17.23",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.21",
     "dotenv": "^16.4.7",
-    "eslint": "^9.21.0",
+    "eslint": "^9.22.0",
     "eslint-config-xo-typescript": "^7.0.0",
     "eslint-plugin-react": "^7.37.4",
     "postcss": "^8.5.3",
     "react-animate-height": "^3.2.3",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.8.2",
-    "typescript-eslint": "^8.26.0"
+    "typescript-eslint": "^8.26.1",
+    "vite": "^6.2.1"
   },
   "imports": {
     "#Main/*": "./src/Main/*",

vite.config.js

@@ -0,0 +1,13 @@
+export default {
+  build: {
+    outDir: "dist",
+    rollupOptions: {
+      output: {
+        inlineDynamicImports : true,
+        entryFileNames: `compressed/[name].js`,
+        chunkFileNames: `compressed/[name].js`,
+        assetFileNames: `compressed/[name].[ext]`
+      }
+    }
+  }
+}