Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feature/Faster loading (#746) 

* feature/Faster loading

This refactors all the hot-path components for an already-setup JetKVM so that we only
lazy-load the components off the main path. This greatly reduces the initial .JS size at
initial page load from a single file of

dist/assets/index-D4LZBdmN.js                          1,969.46 kB │ gzip: 570.08 kB

To these files, of which the hot-path only loads the 963.29 kB index for a savings of
just over a megabyte (180kb savings in gzip).

dist/assets/login-DA9KVVX1.js                                     0.64 kB │ gzip:   0.40 kB
dist/assets/signup-Bb_VCzY1.js                                    0.67 kB │ gzip:   0.40 kB
dist/assets/devices._id.settings.macros.add-DpBnq5E0.js           0.82 kB │ gzip:   0.55 kB
dist/assets/devices._id.settings.appearance-VHd5B2H2.js           0.91 kB │ gzip:   0.52 kB
dist/assets/devices._id.settings.general.reboot-DsRBP5Dd.js       1.01 kB │ gzip:   0.52 kB
dist/assets/UpdateInProgressStatusCard-DJCdJo-z.js                1.05 kB │ gzip:   0.54 kB
dist/assets/devices._id.other-session-BpXjEP6K.js                 1.09 kB │ gzip:   0.56 kB
dist/assets/devices.already-adopted-BC1xoKrN.js                   1.16 kB │ gzip:   0.57 kB
dist/assets/Checkbox-DGO277w5.js                                  1.24 kB │ gzip:   0.64 kB
dist/assets/devices._id.settings.keyboard-Cno0kaUr.js             1.59 kB │ gzip:   0.81 kB
dist/assets/devices._id.settings.general._index-CNW0Pj5B.js       1.71 kB │ gzip:   0.76 kB
dist/assets/devices._id.settings.macros.edit-BYQGw2CJ.js          1.92 kB │ gzip:   1.00 kB
dist/assets/ConfirmDialog-lzerZkf7.js                             2.77 kB │ gzip:   1.13 kB
dist/assets/AuthLayout-H4vGP3TU.js                                2.96 kB │ gzip:   1.41 kB
dist/assets/AutoHeight-B-TU1fRg.js                                4.07 kB │ gzip:   1.63 kB
dist/assets/devices._id.settings.video-O3qJWstQ.js                5.68 kB │ gzip:   2.17 kB
dist/assets/devices._id.settings.advanced-Drd_iPzw.js             5.98 kB │ gzip:   2.08 kB
dist/assets/devices._id.settings.macros-D3unB0uf.js               6.05 kB │ gzip:   2.13 kB
dist/assets/devices._id.settings.access.local-auth-BltQI66N.js    6.17 kB │ gzip:   1.54 kB
dist/assets/devices._id.settings.mouse-CAwDHqxl.js               10.02 kB │ gzip:   3.59 kB
dist/assets/devices._id.settings.general.update-jkzXML1U.js      10.22 kB │ gzip:   2.67 kB
dist/assets/devices._id.settings.hardware-B7v3lfwA.js            10.41 kB │ gzip:   3.03 kB
dist/assets/devices._id.settings.network-CJYfzFt2.js             25.23 kB │ gzip:   7.21 kB
dist/assets/devices._id.mount-4AT1reig.js                        43.92 kB │ gzip:  19.81 kB
dist/assets/MacroForm-BQpdQgFn.js                                49.75 kB │ gzip:  16.25 kB
dist/assets/connectionStats-NM-PZeH3.js                         400.14 kB │ gzip: 110.33 kB
dist/assets/Terminal-Dgo3sfr-.js                                425.05 kB │ gzip: 109.49 kB
dist/assets/index-w6H2Mz3f.js                                   963.29 kB │ gzip: 294.20 kB

* Remove feral async declarations on things that have no await
This commit is contained in:
Marc Brooks 2025-08-26 09:55:08 -05:00 committed by GitHub
parent d952480c2a
commit 05bf61152b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 75 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/UsbDeviceSetting.tsx
View File

@ -127,7 +127,7 @@ export function UsbDeviceSetting() {
); );
const handlePresetChange = useCallback( const handlePresetChange = useCallback(
async (e: React.ChangeEvent<HTMLSelectElement>) => { (e: React.ChangeEvent<HTMLSelectElement>) => {
const newPreset = e.target.value; const newPreset = e.target.value;
setSelectedPreset(newPreset); setSelectedPreset(newPreset);

2
ui/src/components/UsbInfoSetting.tsx
View File

@ -137,7 +137,7 @@ export function UsbInfoSetting() {
); );
useEffect(() => { useEffect(() => {
send("getDeviceID", {}, async (resp: JsonRpcResponse) => { send("getDeviceID", {}, (resp: JsonRpcResponse) => {
if ("error" in resp) { if ("error" in resp) {
return notifications.error( return notifications.error(
`Failed to get device ID: ${resp.error.data || "Unknown error"}`, `Failed to get device ID: ${resp.error.data || "Unknown error"}`,

2
ui/src/components/WebRTCVideo.tsx
View File

@ -411,7 +411,7 @@ export default function WebRTCVideo() {
); );
const keyDownHandler = useCallback( const keyDownHandler = useCallback(
async (e: KeyboardEvent) => { (e: KeyboardEvent) => {
e.preventDefault(); e.preventDefault();
const prev = useHidStore.getState(); const prev = useHidStore.getState();
let code = e.code; let code = e.code;

78
ui/src/main.tsx
View File

@ -1,3 +1,4 @@
import { lazy } from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import "./index.css"; import "./index.css";
import { import {
@ -9,46 +10,45 @@ import {
} from "react-router-dom"; } from "react-router-dom";
import { ExclamationTriangleIcon } from "@heroicons/react/16/solid"; import { ExclamationTriangleIcon } from "@heroicons/react/16/solid";
import { CLOUD_API, DEVICE_API } from "@/ui.config";
import api from "@/api";
import Root from "@/root";
import Card from "@components/Card";
import EmptyCard from "@components/EmptyCard"; import EmptyCard from "@components/EmptyCard";
import NotFoundPage from "@components/NotFoundPage"; import NotFoundPage from "@components/NotFoundPage";
import DeviceRoute, { LocalDevice } from "@routes/devices.$id";
import WelcomeRoute, { DeviceStatus } from "@routes/welcome-local";
import LoginLocalRoute from "@routes/login-local";
import WelcomeLocalModeRoute from "@routes/welcome-local.mode";
import WelcomeLocalPasswordRoute from "@routes/welcome-local.password";
import AdoptRoute from "@routes/adopt";
import SetupRoute from "@routes/devices.$id.setup";
import DevicesIdDeregister from "@routes/devices.$id.deregister"; import DevicesIdDeregister from "@routes/devices.$id.deregister";
import DeviceIdRename from "@routes/devices.$id.rename"; import DeviceIdRename from "@routes/devices.$id.rename";
import AdoptRoute from "@routes/adopt";
import SignupRoute from "@routes/signup";
import LoginRoute from "@routes/login";
import SetupRoute from "@routes/devices.$id.setup";
import DevicesRoute from "@routes/devices"; import DevicesRoute from "@routes/devices";
import DeviceRoute, { LocalDevice } from "@routes/devices.$id"; import SettingsIndexRoute from "@routes/devices.$id.settings._index";
import Card from "@components/Card"; import SettingsAccessIndexRoute from "@routes/devices.$id.settings.access._index";
import DevicesAlreadyAdopted from "@routes/devices.already-adopted"; const Notifications = lazy(() => import("@/notifications"));
const SignupRoute = lazy(() => import("@routes/signup"));
import Root from "./root"; const LoginRoute = lazy(() => import("@routes/login"));
import Notifications from "./notifications"; const DevicesAlreadyAdopted = lazy(() => import("@routes/devices.already-adopted"));
import LoginLocalRoute from "./routes/login-local"; const OtherSessionRoute = lazy(() => import("@routes/devices.$id.other-session"));
import WelcomeLocalModeRoute from "./routes/welcome-local.mode"; const MountRoute = lazy(() => import("./routes/devices.$id.mount"));
import WelcomeRoute, { DeviceStatus } from "./routes/welcome-local"; const SettingsRoute = lazy(() => import("@routes/devices.$id.settings"));
import WelcomeLocalPasswordRoute from "./routes/welcome-local.password"; const SettingsMouseRoute = lazy(() => import("@routes/devices.$id.settings.mouse"));
import { CLOUD_API, DEVICE_API } from "./ui.config"; const SettingsKeyboardRoute = lazy(() => import("@routes/devices.$id.settings.keyboard"));
import OtherSessionRoute from "./routes/devices.$id.other-session"; const SettingsAdvancedRoute = lazy(() => import("@routes/devices.$id.settings.advanced"));
import MountRoute from "./routes/devices.$id.mount"; const SettingsHardwareRoute = lazy(() => import("@routes/devices.$id.settings.hardware"));
import * as SettingsRoute from "./routes/devices.$id.settings"; const SettingsVideoRoute = lazy(() => import("@routes/devices.$id.settings.video"));
import SettingsMouseRoute from "./routes/devices.$id.settings.mouse"; const SettingsAppearanceRoute = lazy(() => import("@routes/devices.$id.settings.appearance"));
import SettingsKeyboardRoute from "./routes/devices.$id.settings.keyboard"; const SettingsGeneralIndexRoute = lazy(() => import("@routes/devices.$id.settings.general._index"));
import api from "./api"; const SettingsGeneralRebootRoute = lazy(() => import("@routes/devices.$id.settings.general.reboot"));
import * as SettingsIndexRoute from "./routes/devices.$id.settings._index"; const SettingsGeneralUpdateRoute = lazy(() => import("@routes/devices.$id.settings.general.update"));
import SettingsAdvancedRoute from "./routes/devices.$id.settings.advanced"; const SettingsNetworkRoute = lazy(() => import("@routes/devices.$id.settings.network"));
import SettingsAccessIndexRoute from "./routes/devices.$id.settings.access._index"; const SecurityAccessLocalAuthRoute = lazy(() => import("@routes/devices.$id.settings.access.local-auth"));
import SettingsHardwareRoute from "./routes/devices.$id.settings.hardware"; const SettingsMacrosRoute = lazy(() => import("@routes/devices.$id.settings.macros"));
import SettingsVideoRoute from "./routes/devices.$id.settings.video"; const SettingsMacrosAddRoute = lazy(() => import("@routes/devices.$id.settings.macros.add"));
import SettingsAppearanceRoute from "./routes/devices.$id.settings.appearance"; const SettingsMacrosEditRoute = lazy(() => import("@routes/devices.$id.settings.macros.edit"));
import * as SettingsGeneralIndexRoute from "./routes/devices.$id.settings.general._index";
import SettingsGeneralRebootRoute from "./routes/devices.$id.settings.general.reboot";
import SettingsGeneralUpdateRoute from "./routes/devices.$id.settings.general.update";
import SettingsNetworkRoute from "./routes/devices.$id.settings.network";
import SecurityAccessLocalAuthRoute from "./routes/devices.$id.settings.access.local-auth";
import SettingsMacrosRoute from "./routes/devices.$id.settings.macros";
import SettingsMacrosAddRoute from "./routes/devices.$id.settings.macros.add";
import SettingsMacrosEditRoute from "./routes/devices.$id.settings.macros.edit";
export const isOnDevice = import.meta.env.MODE === "device"; export const isOnDevice = import.meta.env.MODE === "device";
export const isInCloud = !isOnDevice; export const isInCloud = !isOnDevice;
@ -128,7 +128,7 @@ if (isOnDevice) {
}, },
{ {
path: "settings", path: "settings",
element: <SettingsRoute.default />, element: <SettingsRoute />,
children: [ children: [
{ {
index: true, index: true,
@ -139,7 +139,7 @@ if (isOnDevice) {
children: [ children: [
{ {
index: true, index: true,
element: <SettingsGeneralIndexRoute.default />, element: <SettingsGeneralIndexRoute />,
}, },
{ {
path: "reboot", path: "reboot",
@ -265,7 +265,7 @@ if (isOnDevice) {
}, },
{ {
path: "settings", path: "settings",
element: <SettingsRoute.default />, element: <SettingsRoute />,
children: [ children: [
{ {
index: true, index: true,
@ -276,7 +276,7 @@ if (isOnDevice) {
children: [ children: [
{ {
index: true, index: true,
element: <SettingsGeneralIndexRoute.default />, element: <SettingsGeneralIndexRoute />,
}, },
{ {
path: "update", path: "update",

4
ui/src/routes/devices.$id.mount.tsx
View File

@ -89,7 +89,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
console.log(`Mounting ${url} as ${mode}`); console.log(`Mounting ${url} as ${mode}`);
setMountInProgress(true); setMountInProgress(true);
send("mountWithHTTP", { url, mode }, async (resp: JsonRpcResponse) => { send("mountWithHTTP", { url, mode }, (resp: JsonRpcResponse) => {
if ("error" in resp) triggerError(resp.error.message); if ("error" in resp) triggerError(resp.error.message);
clearMountMediaState(); clearMountMediaState();
@ -108,7 +108,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
console.log(`Mounting ${fileName} as ${mode}`); console.log(`Mounting ${fileName} as ${mode}`);
setMountInProgress(true); setMountInProgress(true);
send("mountWithStorage", { filename: fileName, mode }, async (resp: JsonRpcResponse) => { send("mountWithStorage", { filename: fileName, mode }, (resp: JsonRpcResponse) => {
if ("error" in resp) triggerError(resp.error.message); if ("error" in resp) triggerError(resp.error.message);
clearMountMediaState(); clearMountMediaState();

8
ui/src/routes/devices.$id.settings._index.tsx
View File

@ -2,6 +2,12 @@ import { LoaderFunctionArgs, redirect } from "react-router-dom";
import { getDeviceUiPath } from "../hooks/useAppNavigation"; import { getDeviceUiPath } from "../hooks/useAppNavigation";
export function loader({ params }: LoaderFunctionArgs) { const loader = ({ params }: LoaderFunctionArgs) => {
return redirect(getDeviceUiPath("/settings/general", params.id)); return redirect(getDeviceUiPath("/settings/general", params.id));
} }
export default function SettingIndexRoute() {
return (<></>);
}
SettingIndexRoute.loader = loader;

4
ui/src/routes/devices.$id.settings.access._index.tsx
View File

@ -87,7 +87,7 @@ export default function SettingsAccessIndexRoute() {
}); });
}, [send]); }, [send]);
const deregisterDevice = async () => { const deregisterDevice = () => {
send("deregisterDevice", {}, (resp: JsonRpcResponse) => { send("deregisterDevice", {}, (resp: JsonRpcResponse) => {
if ("error" in resp) { if ("error" in resp) {
notifications.error( notifications.error(
@ -198,7 +198,7 @@ export default function SettingsAccessIndexRoute() {
getCloudState(); getCloudState();
getTLSState(); getTLSState();
send("getDeviceID", {}, async (resp: JsonRpcResponse) => { send("getDeviceID", {}, (resp: JsonRpcResponse) => {
if ("error" in resp) return console.error(resp.error); if ("error" in resp) return console.error(resp.error);
setDeviceId(resp.result as string); setDeviceId(resp.result as string);
}); });

4
ui/src/routes/devices.$id.settings.general.update.tsx
View File

@ -62,7 +62,7 @@ export function Dialog({
const { modalView, setModalView, otaState } = useUpdateStore(); const { modalView, setModalView, otaState } = useUpdateStore();
const onFinishedLoading = useCallback( const onFinishedLoading = useCallback(
async (versionInfo: SystemVersionInfo) => { (versionInfo: SystemVersionInfo) => {
const hasUpdate = const hasUpdate =
versionInfo?.systemUpdateAvailable || versionInfo?.appUpdateAvailable; versionInfo?.systemUpdateAvailable || versionInfo?.appUpdateAvailable;
@ -141,7 +141,7 @@ function LoadingState({
const getVersionInfo = useCallback(() => { const getVersionInfo = useCallback(() => {
return new Promise<SystemVersionInfo>((resolve, reject) => { return new Promise<SystemVersionInfo>((resolve, reject) => {
send("getUpdateStatus", {}, async (resp: JsonRpcResponse) => { send("getUpdateStatus", {}, (resp: JsonRpcResponse) => {
if ("error" in resp) { if ("error" in resp) {
notifications.error(`Failed to check for updates: ${resp.error}`); notifications.error(`Failed to check for updates: ${resp.error}`);
reject(new Error("Failed to check for updates")); reject(new Error("Failed to check for updates"));

6
ui/src/routes/devices.$id.settings.mouse.tsx
View File

@ -121,7 +121,7 @@ export default function SettingsMouseRoute() {
const saveJigglerConfig = useCallback( const saveJigglerConfig = useCallback(
(jigglerConfig: JigglerConfig) => { (jigglerConfig: JigglerConfig) => {
// We assume the jiggler should be set to enabled if the config is being updated // We assume the jiggler should be set to enabled if the config is being updated
send("setJigglerState", { enabled: true }, async (resp: JsonRpcResponse) => { send("setJigglerState", { enabled: true }, (resp: JsonRpcResponse) => {
if ("error" in resp) { if ("error" in resp) {
return notifications.error( return notifications.error(
`Failed to set jiggler state: ${resp.error.data || "Unknown error"}`, `Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,
@ -129,7 +129,7 @@ export default function SettingsMouseRoute() {
} }
}); });
send("setJigglerConfig", { jigglerConfig }, async (resp: JsonRpcResponse) => { send("setJigglerConfig", { jigglerConfig }, (resp: JsonRpcResponse) => {
if ("error" in resp) { if ("error" in resp) {
const errorMsg = resp.error.data || "Unknown error"; const errorMsg = resp.error.data || "Unknown error";
@ -163,7 +163,7 @@ export default function SettingsMouseRoute() {
// We don't need to update the device jiggler state when the option is "disabled" // We don't need to update the device jiggler state when the option is "disabled"
if (option === "disabled") { if (option === "disabled") {
send("setJigglerState", { enabled: false }, async (resp: JsonRpcResponse) => { send("setJigglerState", { enabled: false }, (resp: JsonRpcResponse) => {
if ("error" in resp) { if ("error" in resp) {
return notifications.error( return notifications.error(
`Failed to set jiggler state: ${resp.error.data || "Unknown error"}`, `Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,

36
ui/src/routes/devices.$id.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { import {
LoaderFunctionArgs, LoaderFunctionArgs,
Outlet, Outlet,
@ -16,7 +16,11 @@ import { FocusTrap } from "focus-trap-react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import useWebSocket from "react-use-websocket"; import useWebSocket from "react-use-websocket";
import { CLOUD_API, DEVICE_API } from "@/ui.config";
import api from "@/api";
import { checkAuth, isInCloud, isOnDevice } from "@/main";
import { cx } from "@/cva.config"; import { cx } from "@/cva.config";
import notifications from "@/notifications";
import { import {
HidState, HidState,
KeyboardLedState, KeyboardLedState,
@ -34,27 +38,21 @@ import {
VideoState, VideoState,
} from "@/hooks/stores"; } from "@/hooks/stores";
import WebRTCVideo from "@components/WebRTCVideo"; import WebRTCVideo from "@components/WebRTCVideo";
import { checkAuth, isInCloud, isOnDevice } from "@/main";
import DashboardNavbar from "@components/Header"; import DashboardNavbar from "@components/Header";
import ConnectionStatsSidebar from "@/components/sidebar/connectionStats"; const ConnectionStatsSidebar = lazy(() => import('@/components/sidebar/connectionStats'));
const Terminal = lazy(() => import('@components/Terminal'));
const UpdateInProgressStatusCard = lazy(() => import("@/components/UpdateInProgressStatusCard"));
import Modal from "@/components/Modal";
import { JsonRpcRequest, JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc"; import { JsonRpcRequest, JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
import Terminal from "@components/Terminal";
import { CLOUD_API, DEVICE_API } from "@/ui.config";
import UpdateInProgressStatusCard from "../components/UpdateInProgressStatusCard";
import api from "../api";
import Modal from "../components/Modal";
import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
import { import {
ConnectionFailedOverlay, ConnectionFailedOverlay,
LoadingConnectionOverlay, LoadingConnectionOverlay,
PeerConnectionDisconnectedOverlay, PeerConnectionDisconnectedOverlay,
} from "../components/VideoOverlay"; } from "@/components/VideoOverlay";
import { FeatureFlagProvider } from "../providers/FeatureFlagProvider"; import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
import notifications from "../notifications"; import { FeatureFlagProvider } from "@/providers/FeatureFlagProvider";
import { DeviceStatus } from "@routes/welcome-local";
import { DeviceStatus } from "./welcome-local"; import { SystemVersionInfo } from "@routes/devices.$id.settings.general.update";
import { SystemVersionInfo } from "./devices.$id.settings.general.update";
interface LocalLoaderResp { interface LocalLoaderResp {
authMode: "password" | "noPassword" | null; authMode: "password" | "noPassword" | null;
@ -114,7 +112,7 @@ const cloudLoader = async (params: Params<string>): Promise<CloudLoaderResp> =>
return { user, iceConfig, deviceName: device.name || device.id }; return { user, iceConfig, deviceName: device.name || device.id };
}; };
const loader = async ({ params }: LoaderFunctionArgs) => { const loader = ({ params }: LoaderFunctionArgs) => {
return import.meta.env.MODE === "device" ? deviceLoader() : cloudLoader(params); return import.meta.env.MODE === "device" ? deviceLoader() : cloudLoader(params);
}; };
@ -452,7 +450,7 @@ export default function KvmIdRoute() {
} }
}; };
pc.onicecandidate = async ({ candidate }) => { pc.onicecandidate = ({ candidate }) => {
if (!candidate) return; if (!candidate) return;
if (candidate.candidate === "") return; if (candidate.candidate === "") return;
sendWebRTCSignal("new-ice-candidate", candidate); sendWebRTCSignal("new-ice-candidate", candidate);
@ -735,7 +733,7 @@ export default function KvmIdRoute() {
useEffect(() => { useEffect(() => {
if (appVersion) return; if (appVersion) return;
send("getUpdateStatus", {}, async (resp: JsonRpcResponse) => { send("getUpdateStatus", {}, (resp: JsonRpcResponse) => {
if ("error" in resp) { if ("error" in resp) {
notifications.error(`Failed to get device version: ${resp.error}`); notifications.error(`Failed to get device version: ${resp.error}`);
return return