feat: implement lazy loading for hls.js and enhance video player initialization

frontend/src/main.ts

@@ -1,6 +1,7 @@
-import Hls from "hls.js";
 import "./style.css";
 
+type HlsClass = typeof import("hls.js")["default"];
+
 declare global {
   interface Window {
     switchRoom: (room: string) => void;
@@ -9,7 +10,7 @@ declare global {
   }
 }
 
-let hls: Hls | null = null;
+let hls: InstanceType<HlsClass> | null = null;
 let ws: WebSocket | null = null;
 let currentRoom = "main";
 let username = "viewer" + Math.floor(Math.random() * 1000);
@@ -109,18 +110,26 @@ function addMessage(
   messages.scrollTop = messages.scrollHeight;
 }
 
-function initPlayerAndChat() {
+async function initPlayerAndChat() {
   const video = document.getElementById("player") as HTMLVideoElement;
   const manifestUrl = resolveManifestUrl();
 
-  if (Hls.isSupported()) {
-    hls = new Hls();
-    hls.loadSource(manifestUrl);
-    hls.attachMedia(video);
-    hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
-  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+  if (video.canPlayType("application/vnd.apple.mpegurl")) {
     video.src = manifestUrl;
     video.addEventListener("loadedmetadata", () => video.play());
+  } else {
+    try {
+      const { default: Hls } = await import("hls.js");
+      if (Hls.isSupported()) {
+        hls = new Hls();
+        hls.loadSource(manifestUrl);
+        hls.attachMedia(video);
+        hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
+      }
+    } catch (error) {
+      console.error("Failed to load HLS player", error);
+      addMessage("system", "Unable to initialize video player.");
+    }
   }
 
   connectWebSocket("main");
@@ -183,5 +192,5 @@ window.sendMessage = sendMessage;
 window.togglePrivateDM = togglePrivateDM;
 
 document.addEventListener("DOMContentLoaded", () => {
-  initPlayerAndChat();
+  void initPlayerAndChat();
 });

frontend/vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from "vite";
 export default defineConfig({
   envDir: "..",
   build: {
+    chunkSizeWarningLimit: 600,
     rollupOptions: {
       input: {
         main: "index.html",