fix: enable code spliting for app

Author: lakhansamani

.dockerignore

@@ -6,4 +6,5 @@ README.md
 ROADMAP.md
 build
 .env
-data.db
+data.db
+app/node_modules

Makefile

@@ -3,6 +3,8 @@ VERSION := $(or $(VERSION),$(DEFAULT_VERSION))
 
 cmd:
 	cd server && go build -ldflags "-w -X main.VERSION=$(VERSION)" -o '../build/server'
+build-app:
+	cd app && npm i && npm run build
 clean:
 	rm -rf build
 test:

app/build/bundle.css

@@ -0,0 +1,11 @@
+const __is_prod__ = process.env.NODE_ENV === 'production';
+require('esbuild').build({
+	entryPoints: ['src/index.tsx'],
+	chunkNames: '[name]-[hash]',
+	bundle: true,
+	minify: __is_prod__,
+	outdir: 'build',
+	splitting: true,
+	format: 'esm',
+	watch: !__is_prod__,
+});

app/build/bundle.js

@@ -4,7 +4,8 @@
 	"description": "",
 	"main": "index.js",
 	"scripts": {
-		"build": "esbuild src/index.tsx --bundle --minify --sourcemap --outfile=build/bundle.js"
+		"build": "rm -rf build && NODE_ENV=production node ./esbuild.config.js",
+		"start": "NODE_ENV=development node ./esbuild.config.js"
 	},
 	"keywords": [],
 	"author": "Lakhan Samani",

app/build/bundle.js.map

@@ -1,9 +1,10 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, lazy, Suspense } from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { useAuthorizer } from '@authorizerdev/authorizer-react';
-import Dashboard from './pages/dashboard';
-import Login from './pages/login';
-import ResetPassword from './pages/rest-password';
+
+const ResetPassword = lazy(() => import('./pages/rest-password'));
+const Login = lazy(() => import('./pages/login'));
+const Dashboard = lazy(() => import('./pages/dashboard'));
 
 export default function Root() {
 	const { token, loading, config } = useAuthorizer();
@@ -24,22 +25,26 @@ export default function Root() {
 
 	if (token) {
 		return (
-			<Switch>
-				<Route path="/app" exact>
-					<Dashboard />
-				</Route>
-			</Switch>
+			<Suspense fallback={<></>}>
+				<Switch>
+					<Route path="/app" exact>
+						<Dashboard />
+					</Route>
+				</Switch>
+			</Suspense>
 		);
 	}
 
 	return (
-		<Switch>
-			<Route path="/app" exact>
-				<Login />
-			</Route>
-			<Route path="/app/reset-password">
-				<ResetPassword />
-			</Route>
-		</Switch>
+		<Suspense fallback={<></>}>
+			<Switch>
+				<Route path="/app" exact>
+					<Login />
+				</Route>
+				<Route path="/app/reset-password">
+					<ResetPassword />
+				</Route>
+			</Switch>
+		</Suspense>
 	);
 }

app/esbuild.config.js

@@ -0,0 +1,16 @@
+body {
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	color: #374151;
+	font-size: 14px;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}

app/package.json

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import './index.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));