chore: fix code-splitting issue

themesberg · Mar 12, 2022 · abdb95b · abdb95b
1 parent 6039dad
commit abdb95b
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 30 deletions.
diff --git a/config-overrides.js b/config-overrides.js
@@ -0,0 +1,9 @@
+module.exports = {
+  webpack: (config, env) => {
+    if (env === 'production') {
+      config.optimization.splitChunks = { chunks: 'all' };
+    }
+
+    return config;
+  },
+};
diff --git a/package.json b/package.json
@@ -21,10 +21,10 @@
   "private": false,
   "homepage": "https://bacali95.github.io/flowbite-react/",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject",
     "build-components": "tsc -p tsconfig.components.json",
     "lint": "eslint",
     "prettier": "prettier --check {src,test}/**/*.{ts,tsx,json,scss}",
@@ -66,6 +66,7 @@
     "postcss": "^8.4.7",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
+    "react-app-rewired": "^2.2.1",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.2",
     "react-scripts": "^5.0.0",

diff --git a/src/Root.tsx b/src/Root.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, lazy, Suspense, useState } from 'react';
 import {
   HiBadgeCheck,
   HiBell,
@@ -12,14 +12,15 @@ import {
 import { BsGithub } from 'react-icons/bs';
 import { Route, Routes } from 'react-router-dom';
 
-import { DarkThemeToggle, Navbar, Sidebar, SidebarItem } from './components';
-import { AlertsPage } from './pages/AlertsPage';
-import { AccordionPage } from './pages/AccordionPage';
-import { BadgesPage } from './pages/BadgesPage';
-import { BreadcrumbPage } from './pages/BreadcrumbPage';
-import { ButtonsPage } from './pages/ButtonsPage';
-import { TooltipsPage } from './pages/TooltipsPage';
-import { DashboardPage } from './pages/DashboardPage';
+import { DarkThemeToggle, Navbar, Sidebar, SidebarItem, Spinner } from './components';
+
+const DashboardPage = lazy(() => import('./pages/DashboardPage'));
+const AlertsPage = lazy(() => import('./pages/AlertsPage'));
+const AccordionPage = lazy(() => import('./pages/AccordionPage'));
+const BadgesPage = lazy(() => import('./pages/BadgesPage'));
+const BreadcrumbPage = lazy(() => import('./pages/BreadcrumbPage'));
+const ButtonsPage = lazy(() => import('./pages/ButtonsPage'));
+const TooltipsPage = lazy(() => import('./pages/TooltipsPage'));
 
 export const Root: FC = () => {
   const [collapsed, setCollapsed] = useState(false);
@@ -95,15 +96,17 @@ export const Root: FC = () => {
       <div className="flex h-full overflow-hidden bg-gray-50 dark:bg-gray-900">
         <Sidebar collapsed={collapsed} itemsGroups={itemsGroups} />
         <main className="flex-1 overflow-auto p-4">
-          <Routes>
-            <Route path="" element={<DashboardPage />} />
-            <Route path="alerts" element={<AlertsPage />} />
-            <Route path="accordion" element={<AccordionPage />} />
-            <Route path="badges" element={<BadgesPage />} />
-            <Route path="breadcrumb" element={<BreadcrumbPage />} />
-            <Route path="buttons" element={<ButtonsPage />} />
-            <Route path="tooltips" element={<TooltipsPage />} />
-          </Routes>
+          <Suspense fallback={<Spinner />}>
+            <Routes>
+              <Route path="" element={<DashboardPage />} />
+              <Route path="alerts" element={<AlertsPage />} />
+              <Route path="accordion" element={<AccordionPage />} />
+              <Route path="badges" element={<BadgesPage />} />
+              <Route path="breadcrumb" element={<BreadcrumbPage />} />
+              <Route path="buttons" element={<ButtonsPage />} />
+              <Route path="tooltips" element={<TooltipsPage />} />
+            </Routes>
+          </Suspense>
         </main>
       </div>
     </div>

diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import { FC } from 'react';
+
+export type SpinnerProps = { className?: string; fullScreen?: boolean };
+
+export const Spinner: FC<SpinnerProps> = ({ className, fullScreen }) => (
+  <div
+    className={classNames(className, 'flex items-center justify-center w-full', {
+      'h-screen': fullScreen,
+      'h-full': !fullScreen,
+    })}
+  >
+    <svg className="animate-spin h-8 w-8 text-black dark:text-white" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  </div>
+);
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -7,4 +7,5 @@ export * from './Card';
 export * from './DarkThemeToggle';
 export * from './Navbar';
 export * from './Sidebar';
+export * from './Spinner';
 export * from './Tooltip';
diff --git a/src/pages/AccordionPage.tsx b/src/pages/AccordionPage.tsx
@@ -8,7 +8,7 @@ import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 SyntaxHighlighter.registerLanguage('tsx', tsx);
 
-export const AccordionPage: FC = () => {
+const AccordionPage: FC = () => {
   const items: AccordionItem[] = [
     {
       open: true,
@@ -156,3 +156,5 @@ const items = [
     </div>
   );
 };
+
+export default AccordionPage;
diff --git a/src/pages/AlertsPage.tsx b/src/pages/AlertsPage.tsx
@@ -8,7 +8,7 @@ SyntaxHighlighter.registerLanguage('tsx', tsx);
 
 import { Alert, Card } from '../components';
 
-export const AlertsPage: FC = () => {
+const AlertsPage: FC = () => {
   const alertText = (
     <>
       <span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
@@ -232,3 +232,5 @@ export const AlertsPage: FC = () => {
     </div>
   );
 };
+
+export default AlertsPage;
diff --git a/src/pages/BadgesPage.tsx b/src/pages/BadgesPage.tsx
@@ -7,7 +7,7 @@ import { Badge, Card } from '../components';
 
 SyntaxHighlighter.registerLanguage('tsx', tsx);
 
-export const BadgesPage: FC = () => {
+const BadgesPage: FC = () => {
   return (
     <div className="flex flex-col max-w-4xl mx-auto gap-4 dark:text-white">
       <div className="flex flex-col gap-2">
@@ -131,3 +131,5 @@ export const BadgesPage: FC = () => {
     </div>
   );
 };
+
+export default BadgesPage;
diff --git a/src/pages/BreadcrumbPage.tsx b/src/pages/BreadcrumbPage.tsx
@@ -7,7 +7,7 @@ import { HiHome } from 'react-icons/hi';
 
 SyntaxHighlighter.registerLanguage('tsx', tsx);
 
-export const BreadcrumbPage: FC = () => {
+const BreadcrumbPage: FC = () => {
   return (
     <div className="flex flex-col max-w-4xl mx-auto gap-4 dark:text-white">
       <div className="flex flex-col gap-2">
@@ -55,3 +55,5 @@ export const BreadcrumbPage: FC = () => {
     </div>
   );
 };
+
+export default BreadcrumbPage;
diff --git a/src/pages/ButtonsPage.tsx b/src/pages/ButtonsPage.tsx
@@ -6,7 +6,7 @@ import { Button, Card } from '../components';
 
 SyntaxHighlighter.registerLanguage('tsx', tsx);
 
-export const ButtonsPage: FC = () => {
+const ButtonsPage: FC = () => {
   return (
     <div className="flex flex-col max-w-4xl mx-auto gap-4 dark:text-white">
       <div className="flex flex-col gap-2">
@@ -173,3 +173,5 @@ export const ButtonsPage: FC = () => {
     </div>
   );
 };
+
+export default ButtonsPage;
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
@@ -11,7 +11,7 @@ type ComponentItem = {
   images: { light: string; dark: string };
 };
 
-export const DashboardPage: FC = () => {
+const DashboardPage: FC = () => {
   const components: ComponentItem[] = [
     {
       title: 'Alerts',
@@ -81,3 +81,5 @@ export const DashboardPage: FC = () => {
     </div>
   );
 };
+
+export default DashboardPage;
diff --git a/src/pages/TooltipsPage.tsx b/src/pages/TooltipsPage.tsx
@@ -6,7 +6,7 @@ import { Button, Card, Tooltip } from '../components';
 
 SyntaxHighlighter.registerLanguage('tsx', tsx);
 
-export const TooltipsPage: FC = () => {
+const TooltipsPage: FC = () => {
   return (
     <div className="flex flex-col max-w-4xl mx-auto gap-4 dark:text-white">
       <div className="flex flex-col gap-2">
@@ -168,3 +168,5 @@ export const TooltipsPage: FC = () => {
     </div>
   );
 };
+
+export default TooltipsPage;
diff --git a/yarn.lock b/yarn.lock
@@ -8221,6 +8221,13 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-app-rewired@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.2.1.tgz#84901ee1e3f26add0377ebec0b41bcdfce9fc211"
+  integrity sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==
+  dependencies:
+    semver "^5.6.0"
+
 react-dev-utils@^12.0.0:
   version "12.0.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.0.tgz#4eab12cdb95692a077616770b5988f0adf806526"
@@ -8755,7 +8762,7 @@ selfsigned@^2.0.0:
   dependencies:
     node-forge "^1.2.0"
 
-"semver@2 || 3 || 4 || 5":
+"semver@2 || 3 || 4 || 5", semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==