Added lazy load, visualizer and optimized bundle chunks (#635)

* Added lazy load.

* Added visualizer and improved hljs import only yaml

* Optimized manualChunks

frontend/src/components/revision/RevisionDetails.tsx

@@ -45,12 +45,12 @@ type RevisionDetailsProps = {
   latestRevision: number;
 };
 
-export default function RevisionDetails({
+const RevisionDetails = ({
   release,
   installedRevision,
   isLatest,
   latestRevision,
-}: RevisionDetailsProps) {
+}: RevisionDetailsProps) => {
   const [searchParams] = useSearchParams();
 
   const revisionTabs = [
@@ -307,7 +307,7 @@ export default function RevisionDetails({
       <Tabs tabs={revisionTabs} selectedTab={selectedTab} />
     </div>
   );
-}
+};
 
 function RevisionTag({ caption, text }: RevisionTagProps) {
   return (
@@ -534,3 +534,5 @@ const Uninstall = () => {
     </>
   );
 };
+
+export default RevisionDetails;

frontend/src/components/revision/RevisionDiff.tsx

@@ -4,13 +4,14 @@ import { Diff2HtmlUI } from "diff2html/lib/ui/js/diff2html-ui-slim.js";
 import { useGetReleaseInfoByType } from "../../API/releases";
 import { useParams } from "react-router";
 import useCustomSearchParams from "../../hooks/useCustomSearchParams";
-
 import parse from "html-react-parser";
-
-import hljs from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import yaml from "highlight.js/lib/languages/yaml";
 import Spinner from "../Spinner";
 import { diffConfiguration } from "../../utils";
 
+hljs.registerLanguage("yaml", yaml);
+
 type RevisionDiffProps = {
   includeUserDefineOnly?: boolean;
   latestRevision: number;

frontend/src/components/revision/RevisionResource.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from "react";
 import { useParams } from "react-router";
-import hljs from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import yaml from "highlight.js/lib/languages/yaml";
 import { RiExternalLinkLine } from "react-icons/ri";
 
 import type { StructuredResources } from "../../API/releases";
@@ -15,6 +16,8 @@ import Badge, { getBadgeType } from "../Badge";
 import Spinner from "../Spinner";
 import { Troubleshoot } from "../Troubleshoot";
 
+hljs.registerLanguage("yaml", yaml);
+
 interface Props {
   isLatest: boolean;
 }