Lazy loading & improved bundling.
This commit is contained in:
Patrick Fic
91
client/package-lock.json
generated
91
client/package-lock.json
generated
@@ -86,6 +86,7 @@
|
||||
"styled-components": "^6.1.8",
|
||||
"subscriptions-transport-ws": "^0.11.0",
|
||||
"terser-webpack-plugin": "^5.3.10",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-ejs": "^1.7.0",
|
||||
"vite-plugin-svgr": "^4.2.0",
|
||||
"web-vitals": "^3.5.2",
|
||||
@@ -26837,6 +26838,96 @@
|
||||
"vite": "^2.7.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-compression": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
|
||||
"integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==",
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.2",
|
||||
"debug": "^4.3.3",
|
||||
"fs-extra": "^10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vite": ">=2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-compression/node_modules/ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-compression/node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-compression/node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dependencies": {
|
||||
"color-name": "~1.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-compression/node_modules/color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||
},
|
||||
"node_modules/vite-plugin-compression/node_modules/fs-extra": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
|
||||
"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
|
||||
"dependencies": {
|
||||
"graceful-fs": "^4.2.0",
|
||||
"jsonfile": "^6.0.1",
|
||||
"universalify": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-compression/node_modules/has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-compression/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dependencies": {
|
||||
"has-flag": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-ejs": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-ejs/-/vite-plugin-ejs-1.7.0.tgz",
|
||||
|
||||
@@ -86,6 +86,7 @@
|
||||
"styled-components": "^6.1.8",
|
||||
"subscriptions-transport-ws": "^0.11.0",
|
||||
"terser-webpack-plugin": "^5.3.10",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-ejs": "^1.7.0",
|
||||
"vite-plugin-svgr": "^4.2.0",
|
||||
"web-vitals": "^3.5.2",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {FloatButton, Layout} from "antd";
|
||||
import {FloatButton, Layout, Spin} from "antd";
|
||||
// import preval from "preval.macro";
|
||||
import React, {lazy, Suspense, useEffect, useState} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
@@ -220,95 +220,155 @@ export function Manage({conflict, bodyshop}) {
|
||||
<Routes>
|
||||
<Route path='/_test' element={<TestComponent/>}/>
|
||||
<Route path='/' element={<ManageRootPage/>}/>
|
||||
<Route path='/jobs' element={<JobsPage/>}/>
|
||||
<Route path='/jobs' element={
|
||||
<Suspense fallback={<Spin/>}>
|
||||
<JobsPage/>
|
||||
</Suspense>
|
||||
}/>
|
||||
<Route
|
||||
path='/jobs/:jobId/intake'
|
||||
element={<JobIntake/>}
|
||||
element={ <Suspense fallback={<Spin/>}>
|
||||
<JobIntake/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/jobs/:jobId/deliver'
|
||||
element={<JobDeliver/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<JobDeliver/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/jobs/:jobId/checklist'
|
||||
element={<JobChecklistView/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<JobChecklistView/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/jobs/:jobId/close'
|
||||
element={<JobsClose/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<JobsClose/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/jobs/:jobId/admin'
|
||||
element={<JobsAdmin/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<JobsAdmin/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route path='/jobs/all' element={<AllJobs/>}/>
|
||||
<Route path='/jobs/ready' element={<ReadyJobs/>}/>
|
||||
<Route path='/jobs/all' element={<Suspense fallback={<Spin/>}>
|
||||
<AllJobs/>
|
||||
</Suspense>}/>
|
||||
<Route path='/jobs/ready' element={<Suspense fallback={<Spin/>}>
|
||||
<ReadyJobs/>
|
||||
</Suspense>}/>
|
||||
<Route
|
||||
path='/jobs/new'
|
||||
element={<JobsCreateContainerPage/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<JobsCreateContainerPage/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route path='/jobs/:jobId' element={<JobsDetailPage/>}/>
|
||||
<Route path='/temporarydocs/' element={<TempDocs/>}/>
|
||||
<Route path='/jobs/:jobId' element={<Suspense fallback={<Spin/>}>
|
||||
<JobsDetailPage/>
|
||||
</Suspense>}/>
|
||||
<Route path='/temporarydocs/' element={<Suspense fallback={<Spin/>}>
|
||||
<TempDocs/>
|
||||
</Suspense>}/>
|
||||
<Route
|
||||
path='/inventory/'
|
||||
element={<InventoryListPage/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<InventoryListPage/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/courtesycars/'
|
||||
element={<CourtesyCarsPage/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<CourtesyCarsPage/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/courtesycars/new'
|
||||
element={<CourtesyCarCreateContainer/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<CourtesyCarCreateContainer/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/courtesycars/contracts'
|
||||
element={<ContractsList/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<ContractsList/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/courtesycars/contracts/new'
|
||||
element={<ContractCreatePage/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<ContractCreatePage/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/courtesycars/contracts/:contractId'
|
||||
element={<ContractDetailPage/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<ContractDetailPage/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/courtesycars/:ccId'
|
||||
element={<CourtesyCarDetailContainer/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<CourtesyCarDetailContainer/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route path='/profile' element={<ProfilePage/>}/>
|
||||
<Route path='/profile' element={<Suspense fallback={<Spin/>}>
|
||||
<ProfilePage/>
|
||||
</Suspense>}/>
|
||||
<Route
|
||||
path='/vehicles'
|
||||
element={<VehiclesContainer/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<VehiclesContainer/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/production/list'
|
||||
element={<ProductionListPage/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<ProductionListPage/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/production/board'
|
||||
element={<ProductionBoardPage/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<ProductionBoardPage/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/vehicles/:vehId'
|
||||
element={<VehiclesDetailContainer/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<VehiclesDetailContainer/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route path='/bills' element={<BillsListPage/>}/>
|
||||
<Route path='/owners' element={<OwnersContainer/>}/>
|
||||
<Route path='/bills' element={<Suspense fallback={<Spin/>}>
|
||||
<BillsListPage/>
|
||||
</Suspense>}/>
|
||||
<Route path='/owners' element={<Suspense fallback={<Spin/>}>
|
||||
<OwnersContainer/>
|
||||
</Suspense>}/>
|
||||
<Route
|
||||
path='/owners/:ownerId'
|
||||
element={<OwnersDetailContainer/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<OwnersDetailContainer/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/schedule'
|
||||
element={<ScheduleContainer/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<ScheduleContainer/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/available'
|
||||
element={<JobsAvailablePage/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<JobsAvailablePage/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route path='/shop' element={<ShopPage/>}/>
|
||||
<Route path='/shop' element={<Suspense fallback={<Spin/>}>
|
||||
<ShopPage/>
|
||||
</Suspense>}/>
|
||||
{
|
||||
// <Route
|
||||
// path='/shop/templates'
|
||||
@@ -317,50 +377,86 @@ export function Manage({conflict, bodyshop}) {
|
||||
}
|
||||
<Route
|
||||
path='/shop/vendors'
|
||||
element={<ShopVendorPageContainer/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<ShopVendorPageContainer/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/shop/csi'
|
||||
element={<ShopCsiPageContainer/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<ShopCsiPageContainer/>
|
||||
</Suspense>}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path='/accounting/qbo'
|
||||
element={<AccountingQboCallback/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<AccountingQboCallback/>
|
||||
</Suspense>}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path='/accounting/receivables'
|
||||
element={<AccountingReceivables/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<AccountingReceivables/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/accounting/payables'
|
||||
element={<AccountingPayables/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<AccountingPayables/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/accounting/payments'
|
||||
element={<AccountingPayments/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<AccountingPayments/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route
|
||||
path='/accounting/exportlogs'
|
||||
element={<ExportLogs/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<ExportLogs/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route path='/ttapprovals' element={<TtApprovals/>}/>
|
||||
<Route path='/partsqueue' element={<PartsQueue/>}/>
|
||||
<Route path='/phonebook' element={<Phonebook/>}/>
|
||||
<Route path='/ttapprovals' element={<Suspense fallback={<Spin/>}>
|
||||
<TtApprovals/>
|
||||
</Suspense>}/>
|
||||
<Route path='/partsqueue' element={<Suspense fallback={<Spin/>}>
|
||||
<PartsQueue/>
|
||||
</Suspense>}/>
|
||||
<Route path='/phonebook' element={<Suspense fallback={<Spin/>}>
|
||||
<Phonebook/>
|
||||
</Suspense>}/>
|
||||
|
||||
<Route path='/payments' element={<PaymentsAll/>}/>
|
||||
<Route path='/shiftclock' element={<ShiftClock/>}/>
|
||||
<Route path='/scoreboard' element={<Scoreboard/>}/>
|
||||
<Route path='/payments' element={<Suspense fallback={<Spin/>}>
|
||||
<PaymentsAll/>
|
||||
</Suspense>}/>
|
||||
<Route path='/shiftclock' element={<Suspense fallback={<Spin/>}>
|
||||
<ShiftClock/>
|
||||
</Suspense>}/>
|
||||
<Route path='/scoreboard' element={<Suspense fallback={<Spin/>}>
|
||||
<Scoreboard/>
|
||||
</Suspense>}/>
|
||||
<Route
|
||||
path='/timetickets'
|
||||
element={<TimeTicketsAll/>}
|
||||
element={<Suspense fallback={<Spin/>}>
|
||||
<TimeTicketsAll/>
|
||||
</Suspense>}
|
||||
/>
|
||||
<Route path='/help' element={<Help/>}/>
|
||||
<Route path='/help' element={<Suspense fallback={<Spin/>}>
|
||||
<Help/>
|
||||
</Suspense>}/>
|
||||
<Route path='/emailtest' element={<EmailTest/>}/>
|
||||
<Route path='/dashboard' element={<Dashboard/>}/>
|
||||
<Route path='/dms' element={<Dms/>}/>
|
||||
<Route path='/dmsap' element={<DmsPayables/>}/>
|
||||
<Route path='/dashboard' element={<Suspense fallback={<Spin/>}>
|
||||
<Dashboard/>
|
||||
</Suspense>}/>
|
||||
<Route path='/dms' element={<Suspense fallback={<Spin/>}>
|
||||
<Dms/>
|
||||
</Suspense>}/>
|
||||
<Route path='/dmsap' element={<Suspense fallback={<Spin/>}>
|
||||
<DmsPayables/>
|
||||
</Suspense>}/>
|
||||
</Routes>
|
||||
</Suspense>
|
||||
);
|
||||
|
||||
@@ -17,7 +17,7 @@ export default function InstanceRenderManager({ executeFunction, rome, promanage
|
||||
propToReturn = imex;
|
||||
break;
|
||||
case 'ROME':
|
||||
propToReturn = rome;
|
||||
propToReturn = rome; //TODO:AIO Implement USE_IMEX
|
||||
break;
|
||||
case 'PROMANAGER':
|
||||
//Return the rome prop if USE_ROME.
|
||||
|
||||
@@ -5,6 +5,7 @@ import * as path from 'path';
|
||||
import * as url from 'url';
|
||||
import { defineConfig } from 'vite';
|
||||
import { ViteEjsPlugin } from 'vite-plugin-ejs';
|
||||
import CompressionPlugin from 'vite-plugin-compression';
|
||||
|
||||
process.env.VITE_APP_GIT_SHA_DATE = new Date().toLocaleString('en-US', {
|
||||
timeZone: 'America/Los_Angeles',
|
||||
@@ -42,13 +43,26 @@ export default defineConfig({
|
||||
|
||||
reactVirtualized(),
|
||||
react(),
|
||||
CompressionPlugin(),
|
||||
],
|
||||
server: {
|
||||
host: true,
|
||||
port: 3000,
|
||||
open: true,
|
||||
},
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
antd: ['antd'],
|
||||
'react-redux': ['react-redux'],
|
||||
redux: ['redux'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['react', 'react-dom', 'antd', '@apollo/client', '@reduxjs/toolkit', 'axios'],
|
||||
esbuildOptions: {
|
||||
loader: {
|
||||
'.js': 'jsx',
|
||||
|
||||
Reference in New Issue
Block a user