From 63945e0ce2fc40c7761902ac1240dfc2afbe2e78 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Tue, 27 Feb 2024 13:07:57 -0800 Subject: [PATCH] Lazy loading & improved bundling. --- client/package-lock.json | 91 +++++++++ client/package.json | 1 + .../pages/manage/manage.page.component.jsx | 192 +++++++++++++----- client/src/utils/instanceRenderMgr.js | 2 +- client/vite.config.js | 14 ++ 5 files changed, 251 insertions(+), 49 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 06cb6ca6e..05d86a08e 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -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", diff --git a/client/package.json b/client/package.json index 75c7de5b6..e82f4a839 100644 --- a/client/package.json +++ b/client/package.json @@ -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", diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx index 094572659..801b46f4d 100644 --- a/client/src/pages/manage/manage.page.component.jsx +++ b/client/src/pages/manage/manage.page.component.jsx @@ -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}) { }/> }/> - }/> + }> + + + }/> } + element={ }> + + } /> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> - }/> - }/> + }> + + }/> + }> + + }/> } + element={}> + + } /> - }/> - }/> + }> + + }/> + }> + + }/> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> - }/> + }> + + }/> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> - }/> - }/> + }> + + }/> + }> + + }/> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> - }/> + }> + + }/> { // } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> } + element={}> + + } /> - }/> - }/> - }/> + }> + + }/> + }> + + }/> + }> + + }/> - }/> - }/> - }/> + }> + + }/> + }> + + }/> + }> + + }/> } + element={}> + + } /> - }/> + }> + + }/> }/> - }/> - }/> - }/> + }> + + }/> + }> + + }/> + }> + + }/> ); diff --git a/client/src/utils/instanceRenderMgr.js b/client/src/utils/instanceRenderMgr.js index 21661f765..752c4c6d1 100644 --- a/client/src/utils/instanceRenderMgr.js +++ b/client/src/utils/instanceRenderMgr.js @@ -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. diff --git a/client/vite.config.js b/client/vite.config.js index b1045eebc..0dd7fb22e 100644 --- a/client/vite.config.js +++ b/client/vite.config.js @@ -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',