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.
feat-resolve-contact-duplicate
gustavo-gsp 2024-09-05 12:20:52 -03:00
parent 0a031bd9a8
commit 05c9f3af6d
5 changed files with 85 additions and 83 deletions

View File

@ -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",

View File

@ -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());

View File

@ -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>
</>
);
};

View File

@ -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>
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={Signup} />
<WhatsAppsProvider>
<LoggedInLayout>
<Route exact path="/" component={Dashboard} isPrivate />
<Route
exact
path="/tickets/:ticketId?"
component={Tickets}
isPrivate
/>
<Route
exact
path="/connections"
component={Connections}
isPrivate
/>
<Route exact path="/report" component={Report} isPrivate />
<Route exact path="/contacts" component={Contacts} isPrivate />
<Route
exact
path="/schedulesReminder"
component={SchedulesReminder}
isPrivate
/>
<Route exact path="/users" component={Users} isPrivate />
<Route
exact
path="/quickAnswers"
component={QuickAnswers}
isPrivate
/>
<Route
exact
path="/statusChatEnd"
component={StatusChatEnd}
isPrivate
/>
<Route
exact
path="/position"
component={Position}
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>
<Suspense fallback={<BackdropLoading />}>
<Switch>
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={Signup} />
<WhatsAppsProvider>
<LoggedInLayout>
<Route exact path="/" component={Dashboard} isPrivate />
<Route
exact
path="/tickets/:ticketId?"
component={Tickets}
isPrivate
/>
<Route
exact
path="/connections"
component={Connections}
isPrivate
/>
<Route exact path="/report" component={Report} isPrivate />
<Route exact path="/contacts" component={Contacts} isPrivate />
<Route
exact
path="/schedulesReminder"
component={SchedulesReminder}
isPrivate
/>
<Route exact path="/users" component={Users} isPrivate />
<Route
exact
path="/quickAnswers"
component={QuickAnswers}
isPrivate
/>
<Route
exact
path="/statusChatEnd"
component={StatusChatEnd}
isPrivate
/>
<Route exact path="/position" component={Position} 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>
</Suspense>
<ToastContainer autoClose={3000} />
</AuthProvider>
</BrowserRouter>
)
);
}
export default Routes

2
package-lock.json generated
View File

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