Performance imrovements: webpack config(uglify & chunks), code refactor

Author: ioay

.babelrc.cjs

@@ -1,4 +1,5 @@
 module.exports = {
+  compact: true,
   plugins: ["styled-jsx/babel"],
   presets: ["@babel/preset-typescript", "@babel/react"],
-};
+}

package.json

@@ -21,7 +21,6 @@
     "@reduxjs/toolkit": "^1.9.5",
     "@rocicorp/rails": "^0.8.0",
     "@rocicorp/reflect": "^0.38.202311200859",
-    "@web3-onboard/core": "^2.21.0",
     "@web3-onboard/metamask": "^2.0.1",
     "@web3-onboard/react": "^2.8.11",
     "@web3-onboard/taho": "^2.0.5",
@@ -38,22 +37,18 @@
     "konva": "^9.2.0",
     "lodash": "4.17.21",
     "os-browserify": "^0.3.0",
-    "patch-package": "^8.0.0",
     "path-browserify": "^1.0.1",
     "posthog-js": "^1.88.2",
     "process": "^0.11.10",
-    "raf-schd": "^4.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-konva": "^18.2.10",
     "react-markdown": "^9.0.0",
     "react-redux": "^8.1.2",
     "react-router-dom": "^5",
     "rehype-external-links": "^3.0.0",
-    "stream": "^0.0.2",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
-    "styled-jsx": "^5.1.2",
     "use-image": "^1.1.1",
     "util": "^0.12.5",
     "zod": "^3.22.4"
@@ -67,7 +62,6 @@
     "@thesis-co/eslint-config": "^0.5.0",
     "@thesis/prettier-config": "github:thesis/prettier-config",
     "@types/dotenv-webpack": "^7.0.4",
-    "@types/raf-schd": "^4.0.1",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-router-dom": "^5",
@@ -78,9 +72,12 @@
     "eslint": "^8.44.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.3",
+    "patch-package": "^8.0.0",
     "prettier": "^2.8.1",
+    "styled-jsx": "^5.1.2",
     "typescript": "^5.0.2",
     "webpack": "^5.88.1",
+    "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.7.3"

src/App.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { Web3OnboardProvider } from "@web3-onboard/react"
+import { Provider } from "react-redux"
+import web3Onboard from "shared/utils/web3Onboard"
+import { PostHogProvider } from "posthog-js/react"
+import { BrowserRouter as Router } from "react-router-dom"
+import GlobalStyles from "ui/GlobalStyles"
+import { POSTHOG_API_KEY, POSTHOG_API_OPTIONS } from "config/posthog"
+import Dapp from "ui/DApp/Dapp"
+import reduxStore from "./redux-state"
+
+export default function App() {
+  return (
+    <>
+      <GlobalStyles />
+      <PostHogProvider apiKey={POSTHOG_API_KEY} options={POSTHOG_API_OPTIONS}>
+        <Provider store={reduxStore}>
+          <Web3OnboardProvider web3Onboard={web3Onboard}>
+            <Router>
+              <Dapp />
+            </Router>
+          </Web3OnboardProvider>
+        </Provider>
+      </PostHogProvider>
+    </>
+  )
+}

src/config/posthog.ts

@@ -0,0 +1,18 @@
+import { PostHogConfig } from "posthog-js"
+
+export const { POSTHOG_API_KEY } = process.env
+
+export const POSTHOG_API_OPTIONS: Partial<PostHogConfig> = {
+  persistence: "localStorage",
+  autocapture: false,
+  capture_pageview: false,
+  disable_session_recording: true,
+  sanitize_properties(properties) {
+    return {
+      ...properties,
+      // The extension has set an expectation that the lib is set to
+      // the analytics env.
+      $lib: process.env.ANALYTICS_ENV,
+    }
+  },
+}

src/env.d.ts

@@ -30,6 +30,9 @@ declare module "*.mp4" {
   export = value
 }
 
+declare module "webpack-bundle-analyzer"
+declare module "uglifyjs-webpack-plugin"
+
 declare namespace NodeJS {
   interface ProcessEnv {
     NODE_ENV: "production" | "development" | "test"

src/index.tsx

@@ -1,52 +1,16 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
-import { Web3OnboardProvider } from "@web3-onboard/react"
-import { Provider } from "react-redux"
-import web3Onboard from "shared/utils/web3Onboard"
-import { PostHogProvider } from "posthog-js/react"
-import { BrowserRouter as Router } from "react-router-dom"
-import DApp from "ui/DApps"
-import reduxStore from "./redux-state"
-
-function DAppProviders() {
-  return (
-    <Provider store={reduxStore}>
-      <Web3OnboardProvider web3Onboard={web3Onboard}>
-        <PostHogProvider
-          apiKey={process.env.POSTHOG_API_KEY}
-          options={{
-            persistence: "localStorage",
-            autocapture: false,
-            capture_pageview: false,
-            disable_session_recording: true,
-            sanitize_properties(properties) {
-              return {
-                ...properties,
-                // The extension has set an expectation that the lib is set to
-                // the analytics env.
-                $lib: process.env.ANALYTICS_ENV,
-              }
-            },
-          }}
-        >
-          <Router>
-            <DApp />
-          </Router>
-        </PostHogProvider>
-      </Web3OnboardProvider>
-    </Provider>
-  )
-}
+import App from "./App"
 
 const root = document.getElementById("root")
 
 if (root) {
   if (process.env.SKIP_REACT_STRICT_MODE === "true") {
-    ReactDOM.createRoot(root).render(<DAppProviders />)
+    ReactDOM.createRoot(root).render(<App />)
   } else {
     ReactDOM.createRoot(root).render(
       <React.StrictMode>
-        <DAppProviders />
+        <App />
       </React.StrictMode>
     )
   }

src/public/index.html

@@ -4,6 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Subscape</title>
+    <style>
+      body {
+        background: #142D2B;
+      }
+    </style>
+    <link rel="preconnect" href="https://networkcheck.reflect-server.net" />
+    <link rel="preconnect" href="https://rpc.tenderly.co" />
+    <link rel="preconnect" href="https://track.customer.io" />
+    <link rel="preconnect" href="https://featureflags.netlify.com" />
+  </head>
+  <body>
+    <div id="root"></div>
     <!-- Script for sending data to customer.io -->
     <script type="text/javascript">
       var _cio = _cio || [];
@@ -21,13 +33,5 @@
       })();
     </script>
     <!-- Script for sending data to customer.io -->
-    <style>
-      body {
-        background: #142D2B;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
   </body>
 </html>

src/redux-state/slices/wallet.ts

@@ -1,5 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit"
-import portrait from "shared/assets/portrait.png"
+import portrait from "shared/assets/portrait.webp"
 import { ETH_ADDRESS, TAHO_ADDRESS } from "shared/constants"
 import { TokenBalances, TransactionProgressStatus } from "shared/types"
 import { getAllowanceTransactionID } from "shared/utils"