feat: add new Remote frontend needs to have <30kB minimized impact on…

… initial load https://bigc-b2b.atlassian.net/browse/BUN-142
bigcommerce · Aug 15, 2022 · 36d2050 · 36d2050
1 parent 0ca507c
commit 36d2050
Show file tree

Hide file tree

Showing 8 changed files with 810 additions and 997 deletions.
diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -23,7 +23,6 @@
     "@rollup/plugin-graphql": "^1.1.0",
     "@types/babel__core": "^7.1.19",
     "date-fns": "^2.28.0",
-    "graphql": "^16.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.33.1",

diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -1,5 +1,7 @@
 import {
   useEffect,
+  lazy,
+  Suspense,
 } from 'react'
 import {
   HashRouter,
@@ -11,12 +13,6 @@ import {
 } from '@b3/hooks'
 import styled from '@emotion/styled'
 
-import {
-  Home,
-  Form,
-  Registered,
-  RegisteredBCToB2B,
-} from '@/pages'
 import {
   Layout,
   RegisteredCloseButton,
@@ -45,6 +41,14 @@ const {
   overflow: defaultOverflow,
 } = document.body.style
 
+const Home = lazy(() => import('./pages/Home'))
+
+const Form = lazy(() => import('./pages/Form'))
+
+const Registered = lazy(() => import('./pages/registered/Registered'))
+
+const RegisteredBCToB2B = lazy(() => import('./pages/registered/RegisteredBCToB2B'))
+
 export default function App() {
   const [isOpen, setIsOpen] = useB3AppOpen(false)
 
@@ -66,37 +70,40 @@ export default function App() {
           fontUrl={FONT_URL}
           customStyles={CUSTOM_STYLES}
         >
+
           {isOpen ? (
             <Layout close={() => setIsOpen(false)}>
               <HeaderContainer>
                 <RegisteredCloseButton setIsOpen={setIsOpen} />
               </HeaderContainer>
-              <Routes>
-                <Route
-                  path="/"
-                  element={<Home />}
-                />
-                <Route
-                  path="/form"
-                  element={<Form />}
-                />
-                <Route
-                  path="/registered"
-                  element={(
-                    <RegisteredProvider>
-                      <Registered setIsOpen={setIsOpen} />
-                    </RegisteredProvider>
+              <Suspense fallback={<div>Loading...</div>}>
+                <Routes>
+                  <Route
+                    path="/"
+                    element={<Home />}
+                  />
+                  <Route
+                    path="/form"
+                    element={<Form />}
+                  />
+                  <Route
+                    path="/registered"
+                    element={(
+                      <RegisteredProvider>
+                        <Registered setIsOpen={setIsOpen} />
+                      </RegisteredProvider>
                   )}
-                />
-                <Route
-                  path="/registeredbctob2b"
-                  element={(
-                    <RegisteredProvider>
-                      <RegisteredBCToB2B />
-                    </RegisteredProvider>
+                  />
+                  <Route
+                    path="/registeredbctob2b"
+                    element={(
+                      <RegisteredProvider>
+                        <RegisteredBCToB2B />
+                      </RegisteredProvider>
                   )}
-                />
-              </Routes>
+                  />
+                </Routes>
+              </Suspense>
             </Layout>
           ) : null}
         </ThemeFrame>

diff --git a/apps/storefront/src/pages/Form.tsx b/apps/storefront/src/pages/Form.tsx
@@ -16,7 +16,7 @@ import {
 const Variant = 'filled'
 const TEST_SITE_KEY = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
 
-export function Form() {
+export default function Form() {
   const [state, setState] = useState<'success'|'error'|'expired'>('error')
 
   return (

diff --git a/apps/storefront/src/pages/Home.tsx b/apps/storefront/src/pages/Home.tsx
@@ -20,7 +20,7 @@ const bull = (
   </Box>
 )
 
-export function Home() {
+export default function Home() {
   return (
     <Card sx={{
       minWidth: 275,

diff --git a/apps/storefront/src/pages/index.tsx b/apps/storefront/src/pages/index.tsx
diff --git a/apps/storefront/src/pages/registered/index.ts b/apps/storefront/src/pages/registered/index.ts
@@ -1,7 +1,9 @@
-import Registered from './Registered'
-import RegisteredBCToB2B from './RegisteredBCToB2B'
+// import Registered from './Registered'
+// import RegisteredBCToB2B from './RegisteredBCToB2B'
 
-export {
-  Registered,
-  RegisteredBCToB2B,
-}
+// export default {
+//   Registered,
+//   RegisteredBCToB2B,
+// }
+
+export {}
diff --git a/apps/storefront/vite.config.ts b/apps/storefront/vite.config.ts
@@ -34,4 +34,16 @@ export default defineConfig({
       ),
     },
   },
+  build: {
+    rollupOptions: {
+      manualChunks: {
+        mui: ['@mui/material'],
+        dropzone: ['react-mui-dropzone'],
+        muiIcon: ['@mui/icons-material'],
+        muiPickers: ['@mui/x-date-pickers'],
+        dateFns: ['date-fns'],
+        lang: ['@b3/lang'],
+      },
+    },
+  },
 })