#5 fixing issues with vite produciton build #3 changes to yarn build …

…and lazy loading
scaffold-eth · Oct 4, 2021 · 13fef91 · 13fef91
1 parent b8ba9a2
commit 13fef91
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
   ],
   "private": true,
   "scripts": {
-    "build": "yarn workspace @scaffold-eth/vite-app build --max-old-space-size=12288",
+    "build": "yarn workspace @scaffold-eth/vite-app build",
+    "serve": "yarn workspace @scaffold-eth/vite-app serve",
     "chain": "yarn workspace @scaffold-eth/hardhat chain",
     "fork": "yarn workspace @scaffold-eth/hardhat fork",
     "node": "yarn workspace @scaffold-eth/hardhat chain",

diff --git a/packages/vite-app-ts/public/index.html b/packages/vite-app-ts/public/index.html
@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1.0, user-scalable=0" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Curated group of Ethereum builders creating products, prototypes, and tutorials with 🏗 scaffold-eth"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="public/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="public/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/packages/vite-app-ts/src/components/routes/index.ts b/packages/vite-app-ts/src/components/routes/index.ts
@@ -1,4 +1,6 @@
-export * from './checkout/Checkout';
-export * from './exampleui/ExampleUI';
-export * from './hints/Hints';
-export * from './subgraph/Subgraph';
+import { lazier } from '~~/helpers/lazier';
+
+export const ExampleUI = lazier(() => import('./exampleui/ExampleUI'), 'ExampleUI');
+export const Checkout = lazier(() => import('./checkout/Checkout'), 'Checkout');
+export const Subgraph = lazier(() => import('./subgraph/Subgraph'), 'Subgraph');
+export const Hints = lazier(() => import('./hints/Hints'), 'Hints');
diff --git a/packages/vite-app-ts/src/components/routes/main/MainPage.tsx b/packages/vite-app-ts/src/components/routes/main/MainPage.tsx
@@ -23,8 +23,7 @@ import {
 import { useDexEthPrice } from 'eth-hooks/dapps';
 
 import { GenericContract } from 'eth-components/ant/generic-contract';
-import { Hints, Subgraph } from '~~/components/routes';
-import { ExampleUI } from '~~/components/routes/exampleui/ExampleUI';
+import { Hints, Subgraph, ExampleUI } from '~~/components/routes';
 import { transactor } from 'eth-components/functions';
 
 import { ethers } from 'ethers';

diff --git a/packages/vite-app-ts/src/helpers/lazier.ts b/packages/vite-app-ts/src/helpers/lazier.ts
@@ -0,0 +1,18 @@
+import { lazy, ComponentType, LazyExoticComponent } from 'react';
+
+/**
+ * modified lazy
+ * @param factory
+ * @param name
+ * @returns
+ */
+export const lazier = <T extends ComponentType<any>>(
+   factory: () => Promise<{
+      [name: string]: T;
+   }>,
+   name: string
+): LazyExoticComponent<T> => {
+   return lazy(() => {
+      return factory().then((module) => ({ default: module[name] }));
+   });
+};