fix: use loadable to not auto include app bundle

Signed-off-by: Randy Lau <[email protected]>
Mehdi-Messaadi · Jul 18, 2023 · 4528905 · 4528905
1 parent 773057a
commit 4528905
Showing 1 changed file with 39 additions and 37 deletions.
diff --git a/root-wrapper.js b/root-wrapper.js
@@ -1,34 +1,36 @@
 import React from "react";
 import { MDXProvider } from "@mdx-js/react";
 import { ContextWrapper } from "./context-wrapper";
-import Code from "./src/components/CodeBlock";
-import CTA_ImageOnly from "./src/components/Call-To-Actions/CTA_ImageOnly";
-import CTA_FullWidth from "./src/components/Call-To-Actions/CTA_FullWidth";
-import CTA_Bottom from "./src/components/Call-To-Actions/CTA_Bottom";
-
-import FAQ from "./src/sections/General/Faq";
 import { Link } from "gatsby";
-import { BlogWrapper } from "./src/collections/blog/Blog.style.js";
-import { MeetTheMaintainer } from "./src/collections/blog/MeetTheMaintainer.style";
-import { MeetTheMeshMate } from "./src/collections/blog/MeetTheMeshMate.style";
-import { CareerWrapper } from "./src/collections/careers/Career.style.js";
-import PositionApply from "./src/collections/careers/how-to-apply.js";
-import { BookWrapper } from "./src/collections/service-mesh-books/Book.style.js";
-import { EventWrapper } from "./src/collections/events/Event.style.js";
+import loadable from "@loadable/component";
+
+
+const Button = loadable(() => import("./src/reusecore/Button"));
+const Blockquote = loadable(() => import("./src/reusecore/Blockquote"));
+const BlockquoteAlt = loadable(() => import("./src/reusecore/Blockquote/Blockquote-alt-style"));
+const Code = loadable(() => import("./src/components/CodeBlock"));
+const Col = loadable(() => import("./src/reusecore/Layout/Col"));
+const CommonForm = loadable(() => import("./src/components/CommonForm"));
+const CTA_Bottom = loadable(() => import("./src/components/Call-To-Actions/CTA_Bottom"));
+const CTA_FullWidth = loadable(() => import("./src/components/Call-To-Actions/CTA_FullWidth"));
+const CTA_ImageOnly = loadable(() => import("./src/components/Call-To-Actions/CTA_ImageOnly"));
+const DockerExtensionCTA = loadable(() => import("./src/sections/Docker-Meshery/docker-extension-CTA"));
+const FAQ = loadable(() => import("./src/sections/General/Faq"));
+const InlineQuotes = loadable(() => import("./src/components/Inline-quotes"));
+const Table = loadable(() => import("./src/components/service-mesh-patterns-Table/Table.js"));
 
-import { NewsWrapper } from "./src/collections/news/News.style.js";
-import { ProjectWrapper } from "./src/collections/projects/Project.style.js";
-import { ResourcesWrapper } from "./src/collections/resources/Resources.style.js";
-import { ProgramsWrapper } from "./src/collections/programs/Programs.style.js";
-import { ChapterStyle } from "./src/components/Learn-Components/Chapters-Style/chapters.style.js";
-import { Col } from "./src/reusecore/Layout";
-import Button from "./src/reusecore/Button";
-import Blockquote from "./src/reusecore/Blockquote";
-import BlockquoteAlt from "./src/reusecore/Blockquote/Blockquote-alt-style";
-import DockerExtensionCTA from "./src/sections/Docker-Meshery/docker-extension-CTA";
-import InlineQuotes from "./src/components/Inline-quotes";
-import Table from "./src/components/service-mesh-patterns-Table/Table.js";
-import CommonForm from "./src/components/CommonForm";
+const BlogWrapper = loadable(() => import("./src/collections/blog/Blog.style.js"));
+const BookWrapper = loadable( () => import("./src/collections/service-mesh-books/Book.style.js"));
+const CareerWrapper = loadable( () => import("./src/collections/careers/Career.style.js"));
+const ChapterStyle = loadable( () => import("./src/components/Learn-Components/Chapters-Style/chapters.style.js"));
+const EventWrapper = loadable( () => import("./src/collections/events/Event.style.js"));
+const MeetTheMaintainer = loadable( () => import("./src/collections/blog/MeetTheMaintainer.style"));
+const MeetTheMeshMate = loadable( () => import("./src/collections/blog/MeetTheMeshMate.style"));
+const NewsWrapper = loadable( () => import("./src/collections/news/News.style.js"));
+const PositionApply = loadable(() => import("./src/collections/careers/how-to-apply.js"));
+const ProgramsWrapper = loadable( () => import("./src/collections/programs/Programs.style.js"));
+const ProjectWrapper = loadable( () => import("./src/collections/projects/Project.style.js"));
+const ResourcesWrapper = loadable( () => import("./src/collections/resources/Resources.style.js"));
 
 const components = {
  pre: ({ children: { props, type } }) => {
@@ -44,19 +46,23 @@ const components = {
  );
  }
  },
- CTA_ImageOnly,
- CTA_FullWidth,
- CTA_Bottom,
- Col,
- FAQ,
- Link,
  Button,
  Blockquote,
  BlockquoteAlt,
+ Col,
+ CommonForm,
+ CTA_Bottom,
+ CTA_FullWidth,
+ CTA_ImageOnly,
+ DockerExtensionCTA,
+ FAQ,
+ InlineQuotes,
+ Link,
+ Table,
  BlogWrapper,
  BookWrapper,
- ChapterStyle,
  CareerWrapper,
+ ChapterStyle,
  EventWrapper,
  MeetTheMaintainer,
  MeetTheMeshMate,
@@ -65,10 +71,6 @@ const components = {
  ProgramsWrapper,
  ProjectWrapper,
  ResourcesWrapper,
- CommonForm,
- Table,
- DockerExtensionCTA,
- InlineQuotes
 };
 
 export const wrapRootElement = ({ element }) => (