perf: improve backend with compression and optimize frontend with lazy load

Details:
- Added compression to the backend to reduce page load times.
- Implemented lazy loading in frontend routes to optimize page loading performance.

backend/package.json

@@ -22,6 +22,7 @@
     "@types/pino": "^6.3.4",
     "axios": "^1.2.3",
     "bcryptjs": "^2.4.3",
+    "compression": "^1.7.4",
     "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",
     "date-fns": "^2.30.0",
@@ -55,9 +56,9 @@
     "yup": "^0.32.8"
   },
   "devDependencies": {
-    "@types/lodash": "4.14",
     "@types/bcryptjs": "^2.4.2",
     "@types/bluebird": "^3.5.32",
+    "@types/compression": "^1.7.5",
     "@types/cookie-parser": "^1.4.2",
     "@types/cors": "^2.8.7",
     "@types/express": "^4.17.13",
@@ -65,6 +66,7 @@
     "@types/faker": "^5.1.3",
     "@types/jest": "^26.0.15",
     "@types/jsonwebtoken": "^8.5.0",
+    "@types/lodash": "4.14",
     "@types/multer": "^1.4.4",
     "@types/node": "^14.11.8",
     "@types/supertest": "^2.0.10",

backend/src/app.ts

@@ -11,6 +11,7 @@ import uploadConfig from "./config/upload";
 import AppError from "./errors/AppError";
 import routes from "./routes";
 import { logger } from "./utils/logger";  
+import compression from 'compression';
 
 Sentry.init({ dsn: process.env.SENTRY_DSN });
 
@@ -23,6 +24,7 @@ app.use(
   })
 ); 
 
+app.use(compression());
 app.use(cookieParser());
 app.use(express.json());
 app.use(Sentry.Handlers.requestHandler());

frontend/src/routes/Route.js

@@ -1,9 +1,14 @@
-import React, { useContext } from "react";
+import React, { useContext, Suspense, lazy } from "react";
 import { Route as RouterRoute, Redirect } from "react-router-dom";
 
 import { AuthContext } from "../context/Auth/AuthContext";
 import BackdropLoading from "../components/BackdropLoading";
 
+// Exemplo de como você carregaria componentes de forma lazy
+const Dashboard = lazy(() => import("../pages/Dashboard"));
+const Login = lazy(() => import("../pages/Login"));
+const Signup = lazy(() => import("../pages/Signup"));
+
 const Route = ({ component: Component, isPrivate = false, ...rest }) => {
   const { isAuth, loading } = useContext(AuthContext);
 
@@ -20,7 +25,7 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => {
     return (
       <>
         {loading && <BackdropLoading />}
-        <Redirect to={{ pathname: "/", state: { from: rest.location } }} />;
+        <Redirect to={{ pathname: "/", state: { from: rest.location } }} />
       </>
     );
   }
@@ -28,7 +33,9 @@ const Route = ({ component: Component, isPrivate = false, ...rest }) => {
   return (
     <>
       {loading && <BackdropLoading />}
-      <RouterRoute {...rest} component={Component} />
+      <Suspense fallback={<BackdropLoading />}>
+        <RouterRoute {...rest} component={Component} />
+      </Suspense>
     </>
   );
 };

frontend/src/routes/index.js

@@ -1,94 +1,85 @@
-import React from 'react'
+import React, { Suspense, lazy } from 'react';
 import { BrowserRouter, Switch } from 'react-router-dom'
 import { ToastContainer } from 'react-toastify'
 
-import LoggedInLayout from '../layout'
-import Dashboard from '../pages/Dashboard/'
-
-import Report from '../pages/Report/'
-import SchedulesReminder from '../pages/SchedulesReminder/'
-
-import Tickets from '../pages/Tickets/'
-import Signup from '../pages/Signup/'
-import Login from '../pages/Login/'
-import Connections from '../pages/Connections/'
-import Campaign from '../pages/Campaign'
-import Settings from '../pages/Settings/'
-import Users from '../pages/Users'
-import Contacts from '../pages/Contacts/'
-import QuickAnswers from '../pages/QuickAnswers/'
-import StatusChatEnd from '../pages/StatusChatEnd/'
-import Position from '../pages/Position/'
-
-import Queues from '../pages/Queues/'
 import { AuthProvider } from '../context/Auth/AuthContext'
 import { WhatsAppsProvider } from '../context/WhatsApp/WhatsAppsContext'
+import LoggedInLayout from '../layout'
 import Route from './Route'
+import BackdropLoading from "../components/BackdropLoading";
+
+const Dashboard = lazy(() => import('../pages/Dashboard/'));
+const Report = lazy(() => import('../pages/Report/'));
+const SchedulesReminder = lazy(() => import('../pages/SchedulesReminder/'));
+const Tickets = lazy(() => import('../pages/Tickets/'));
+const Signup = lazy(() => import('../pages/Signup/'));
+const Login = lazy(() => import('../pages/Login/'));
+const Connections = lazy(() => import('../pages/Connections/'));
+const Campaign = lazy(() => import('../pages/Campaign/'));
+const Settings = lazy(() => import('../pages/Settings/'));
+const Users = lazy(() => import('../pages/Users/'));
+const Contacts = lazy(() => import('../pages/Contacts/'));
+const QuickAnswers = lazy(() => import('../pages/QuickAnswers/'));
+const StatusChatEnd = lazy(() => import('../pages/StatusChatEnd/'));
+const Position = lazy(() => import('../pages/Position/'));
+const Queues = lazy(() => import('../pages/Queues/'));
 
 const Routes = () => {
   return (
     <BrowserRouter>
       <AuthProvider>
-        <Switch>
+        <Suspense fallback={<BackdropLoading />}>
-          <Route exact path="/login" component={Login} />
+          <Switch>
-          <Route exact path="/signup" component={Signup} />
+            <Route exact path="/login" component={Login} />
-          <WhatsAppsProvider>
+            <Route exact path="/signup" component={Signup} />
-            <LoggedInLayout>
+            <WhatsAppsProvider>
-              <Route exact path="/" component={Dashboard} isPrivate />
+              <LoggedInLayout>
-              <Route
+                <Route exact path="/" component={Dashboard} isPrivate />
-                exact
+                <Route
-                path="/tickets/:ticketId?"
+                  exact
-                component={Tickets}
+                  path="/tickets/:ticketId?"
-                isPrivate
+                  component={Tickets}
-              />
+                  isPrivate
-
+                />
-              <Route
+                <Route
-                exact
+                  exact
-                path="/connections"
+                  path="/connections"
-                component={Connections}
+                  component={Connections}
-                isPrivate
+                  isPrivate
-              />
+                />
-
+                <Route exact path="/report" component={Report} isPrivate />
-              <Route exact path="/report" component={Report} isPrivate />
+                <Route exact path="/contacts" component={Contacts} isPrivate />
-
+                <Route
-              <Route exact path="/contacts" component={Contacts} isPrivate />
+                  exact
-
+                  path="/schedulesReminder"
-              <Route
+                  component={SchedulesReminder}
-                exact
+                  isPrivate
-                path="/schedulesReminder"
+                />
-                component={SchedulesReminder}
+                <Route exact path="/users" component={Users} isPrivate />
-                isPrivate
+                <Route
-              />
+                  exact
-
+                  path="/quickAnswers"
-              <Route exact path="/users" component={Users} isPrivate />
+                  component={QuickAnswers}
-              <Route
+                  isPrivate
-                exact
+                />
-                path="/quickAnswers"
+                <Route
-                component={QuickAnswers}
+                  exact
-                isPrivate
+                  path="/statusChatEnd"
-              />
+                  component={StatusChatEnd}
-              <Route
+                  isPrivate
-                exact
+                />
-                path="/statusChatEnd"
+                <Route exact path="/position" component={Position} isPrivate />
-                component={StatusChatEnd}
+                <Route exact path="/Settings" component={Settings} isPrivate />
-                isPrivate
+                <Route exact path="/Queues" component={Queues} isPrivate />
-              />
+                <Route exact path="/campaign" component={Campaign} isPrivate />
-              <Route
+              </LoggedInLayout>
-                exact
+            </WhatsAppsProvider>
-                path="/position"
+          </Switch>
-                component={Position}
+        </Suspense>
-                isPrivate
-              />
-              <Route exact path="/Settings" component={Settings} isPrivate />
-              <Route exact path="/Queues" component={Queues} isPrivate />
-              <Route exact path="/campaign" component={Campaign} isPrivate />
-            </LoggedInLayout>
-          </WhatsAppsProvider>
-        </Switch>
         <ToastContainer autoClose={3000} />
       </AuthProvider>
     </BrowserRouter>
-  )
+  );
 }
 
 export default Routes

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "whaticket",
+  "name": "projeto-hit",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {