Added code splitting for performance.

src/routes/DeveloperRoutes.jsx

@@ -1,7 +1,15 @@
+import { lazy } from 'react'
 import { Route } from 'react-router-dom'
-import SessionStorage from '../components/Dashboard/Developer/SessionStorage.jsx'
+
-import AuthContextDebug from '../components/Dashboard/Developer/AuthContextDebug.jsx'
+const SessionStorage = lazy(
-import ApiContextDebug from '../components/Dashboard/Developer/ApiContextDebug.jsx'
+  () => import('../components/Dashboard/Developer/SessionStorage.jsx')
+)
+const AuthContextDebug = lazy(
+  () => import('../components/Dashboard/Developer/AuthContextDebug.jsx')
+)
+const ApiContextDebug = lazy(
+  () => import('../components/Dashboard/Developer/ApiContextDebug.jsx')
+)
 
 const DeveloperRoutes = [
   <Route

src/routes/InventoryRoutes.jsx

@@ -1,19 +1,51 @@
+import { lazy } from 'react'
 import { Route } from 'react-router-dom'
 
-import FilamentStocks from '../components/Dashboard/Inventory/FilamentStocks.jsx'
+const FilamentStocks = lazy(
-import FilamentStockInfo from '../components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx'
+  () => import('../components/Dashboard/Inventory/FilamentStocks.jsx')
-import PartStocks from '../components/Dashboard/Inventory/PartStocks.jsx'
+)
-import PartStockInfo from '../components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx'
+const FilamentStockInfo = lazy(
-import StockEvents from '../components/Dashboard/Inventory/StockEvents.jsx'
+  () =>
-import StockAudits from '../components/Dashboard/Inventory/StockAudits.jsx'
+    import('../components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx')
-import StockAuditInfo from '../components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx'
+)
-import PurchaseOrders from '../components/Dashboard/Inventory/PurchaseOrders.jsx'
+const PartStocks = lazy(
-import PurchaseOrderInfo from '../components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx'
+  () => import('../components/Dashboard/Inventory/PartStocks.jsx')
-import OrderItems from '../components/Dashboard/Inventory/OrderItems.jsx'
+)
-import OrderItemInfo from '../components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx'
+const PartStockInfo = lazy(
-import Shipments from '../components/Dashboard/Inventory/Shipments.jsx'
+  () => import('../components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx')
-import ShipmentInfo from '../components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx'
+)
-import InventoryOverview from '../components/Dashboard/Inventory/InventoryOverview.jsx'
+const StockEvents = lazy(
+  () => import('../components/Dashboard/Inventory/StockEvents.jsx')
+)
+const StockAudits = lazy(
+  () => import('../components/Dashboard/Inventory/StockAudits.jsx')
+)
+const StockAuditInfo = lazy(
+  () =>
+    import('../components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx')
+)
+const PurchaseOrders = lazy(
+  () => import('../components/Dashboard/Inventory/PurchaseOrders.jsx')
+)
+const PurchaseOrderInfo = lazy(
+  () =>
+    import('../components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx')
+)
+const OrderItems = lazy(
+  () => import('../components/Dashboard/Inventory/OrderItems.jsx')
+)
+const OrderItemInfo = lazy(
+  () => import('../components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx')
+)
+const Shipments = lazy(
+  () => import('../components/Dashboard/Inventory/Shipments.jsx')
+)
+const ShipmentInfo = lazy(
+  () => import('../components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx')
+)
+const InventoryOverview = lazy(
+  () => import('../components/Dashboard/Inventory/InventoryOverview.jsx')
+)
 
 const InventoryRoutes = [
   <Route

src/routes/ManagementRoutes.jsx

@@ -1,42 +1,43 @@
+import { lazy } from 'react'
 import { Route } from 'react-router-dom'
 
-import Filaments from '../components/Dashboard/Management/Filaments'
+const Filaments = lazy(() => import('../components/Dashboard/Management/Filaments'))
-import FilamentInfo from '../components/Dashboard/Management/Filaments/FilamentInfo.jsx'
+const FilamentInfo = lazy(() => import('../components/Dashboard/Management/Filaments/FilamentInfo.jsx'))
-import Parts from '../components/Dashboard/Management/Parts.jsx'
+const Parts = lazy(() => import('../components/Dashboard/Management/Parts.jsx'))
-import PartInfo from '../components/Dashboard/Management/Parts/PartInfo.jsx'
+const PartInfo = lazy(() => import('../components/Dashboard/Management/Parts/PartInfo.jsx'))
-import Products from '../components/Dashboard/Management/Products.jsx'
+const Products = lazy(() => import('../components/Dashboard/Management/Products.jsx'))
-import ProductInfo from '../components/Dashboard/Management/Products/ProductInfo.jsx'
+const ProductInfo = lazy(() => import('../components/Dashboard/Management/Products/ProductInfo.jsx'))
-import Vendors from '../components/Dashboard/Management/Vendors'
+const Vendors = lazy(() => import('../components/Dashboard/Management/Vendors'))
-import VendorInfo from '../components/Dashboard/Management/Vendors/VendorInfo'
+const VendorInfo = lazy(() => import('../components/Dashboard/Management/Vendors/VendorInfo'))
-import Materials from '../components/Dashboard/Management/Materials'
+const Materials = lazy(() => import('../components/Dashboard/Management/Materials'))
-import Couriers from '../components/Dashboard/Management/Couriers'
+const Couriers = lazy(() => import('../components/Dashboard/Management/Couriers'))
-import CourierInfo from '../components/Dashboard/Management/Couriers/CourierInfo.jsx'
+const CourierInfo = lazy(() => import('../components/Dashboard/Management/Couriers/CourierInfo.jsx'))
-import CourierServices from '../components/Dashboard/Management/CourierServices'
+const CourierServices = lazy(() => import('../components/Dashboard/Management/CourierServices'))
-import CourierServiceInfo from '../components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx'
+const CourierServiceInfo = lazy(() => import('../components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx'))
-import Settings from '../components/Dashboard/Management/Settings'
+const Settings = lazy(() => import('../components/Dashboard/Management/Settings'))
-import AuditLogs from '../components/Dashboard/Management/AuditLogs.jsx'
+const AuditLogs = lazy(() => import('../components/Dashboard/Management/AuditLogs.jsx'))
-import NoteTypes from '../components/Dashboard/Management/NoteTypes.jsx'
+const NoteTypes = lazy(() => import('../components/Dashboard/Management/NoteTypes.jsx'))
-import NoteTypeInfo from '../components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx'
+const NoteTypeInfo = lazy(() => import('../components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx'))
-import NoteInfo from '../components/Dashboard/Management/Notes/NoteInfo.jsx'
+const NoteInfo = lazy(() => import('../components/Dashboard/Management/Notes/NoteInfo.jsx'))
-import Users from '../components/Dashboard/Management/Users.jsx'
+const Users = lazy(() => import('../components/Dashboard/Management/Users.jsx'))
-import UserInfo from '../components/Dashboard/Management/Users/UserInfo.jsx'
+const UserInfo = lazy(() => import('../components/Dashboard/Management/Users/UserInfo.jsx'))
-import Hosts from '../components/Dashboard/Management/Hosts.jsx'
+const Hosts = lazy(() => import('../components/Dashboard/Management/Hosts.jsx'))
-import HostInfo from '../components/Dashboard/Management/Hosts/HostInfo.jsx'
+const HostInfo = lazy(() => import('../components/Dashboard/Management/Hosts/HostInfo.jsx'))
-import DocumentSizes from '../components/Dashboard/Management/DocumentSizes.jsx'
+const DocumentSizes = lazy(() => import('../components/Dashboard/Management/DocumentSizes.jsx'))
-import DocumentSizeInfo from '../components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx'
+const DocumentSizeInfo = lazy(() => import('../components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx'))
-import DocumentTemplates from '../components/Dashboard/Management/DocumentTemplates.jsx'
+const DocumentTemplates = lazy(() => import('../components/Dashboard/Management/DocumentTemplates.jsx'))
-import DocumentTemplateInfo from '../components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx'
+const DocumentTemplateInfo = lazy(() => import('../components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx'))
-import DocumentPrinters from '../components/Dashboard/Management/DocumentPrinters.jsx'
+const DocumentPrinters = lazy(() => import('../components/Dashboard/Management/DocumentPrinters.jsx'))
-import DocumentPrinterInfo from '../components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx'
+const DocumentPrinterInfo = lazy(() => import('../components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx'))
-import DocumentJobs from '../components/Dashboard/Management/DocumentJobs.jsx'
+const DocumentJobs = lazy(() => import('../components/Dashboard/Management/DocumentJobs.jsx'))
-import DocumentJobInfo from '../components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx'
+const DocumentJobInfo = lazy(() => import('../components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx'))
-import DocumentTemplateDesign from '../components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx'
+const DocumentTemplateDesign = lazy(() => import('../components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx'))
-import Files from '../components/Dashboard/Management/Files.jsx'
+const Files = lazy(() => import('../components/Dashboard/Management/Files.jsx'))
-import FileInfo from '../components/Dashboard/Management/Files/FileInfo.jsx'
+const FileInfo = lazy(() => import('../components/Dashboard/Management/Files/FileInfo.jsx'))
-import TaxRates from '../components/Dashboard/Management/TaxRates.jsx'
+const TaxRates = lazy(() => import('../components/Dashboard/Management/TaxRates.jsx'))
-import TaxRateInfo from '../components/Dashboard/Management/TaxRates/TaxRateInfo.jsx'
+const TaxRateInfo = lazy(() => import('../components/Dashboard/Management/TaxRates/TaxRateInfo.jsx'))
-import TaxRecords from '../components/Dashboard/Management/TaxRecords.jsx'
+const TaxRecords = lazy(() => import('../components/Dashboard/Management/TaxRecords.jsx'))
-import TaxRecordInfo from '../components/Dashboard/Management/TaxRecords/TaxRecordInfo.jsx'
+const TaxRecordInfo = lazy(() => import('../components/Dashboard/Management/TaxRecords/TaxRecordInfo.jsx'))
 
 const ManagementRoutes = [
   <Route key='filaments' path='management/filaments' element={<Filaments />} />,

src/routes/ProductionRoutes.jsx

@@ -1,15 +1,35 @@
+import { lazy } from 'react'
 import { Route } from 'react-router-dom'
 
-import ProductionOverview from '../components/Dashboard/Production/ProductionOverview'
+const ProductionOverview = lazy(
-import Printers from '../components/Dashboard/Production/Printers'
+  () => import('../components/Dashboard/Production/ProductionOverview')
-import ControlPrinter from '../components/Dashboard/Production/Printers/ControlPrinter.jsx'
+)
-import PrinterInfo from '../components/Dashboard/Production/Printers/PrinterInfo.jsx'
+const Printers = lazy(
-import Jobs from '../components/Dashboard/Production/Jobs.jsx'
+  () => import('../components/Dashboard/Production/Printers')
-import JobInfo from '../components/Dashboard/Production/Jobs/JobInfo.jsx'
+)
-import SubJobs from '../components/Dashboard/Production/SubJobs.jsx'
+const ControlPrinter = lazy(
-import SubJobInfo from '../components/Dashboard/Production/SubJobs/SubJobInfo.jsx'
+  () => import('../components/Dashboard/Production/Printers/ControlPrinter.jsx')
-import GCodeFiles from '../components/Dashboard/Production/GCodeFiles'
+)
-import GCodeFileInfo from '../components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx'
+const PrinterInfo = lazy(
+  () => import('../components/Dashboard/Production/Printers/PrinterInfo.jsx')
+)
+const Jobs = lazy(() => import('../components/Dashboard/Production/Jobs.jsx'))
+const JobInfo = lazy(
+  () => import('../components/Dashboard/Production/Jobs/JobInfo.jsx')
+)
+const SubJobs = lazy(
+  () => import('../components/Dashboard/Production/SubJobs.jsx')
+)
+const SubJobInfo = lazy(
+  () => import('../components/Dashboard/Production/SubJobs/SubJobInfo.jsx')
+)
+const GCodeFiles = lazy(
+  () => import('../components/Dashboard/Production/GCodeFiles')
+)
+const GCodeFileInfo = lazy(
+  () =>
+    import('../components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx')
+)
 
 const ProductionRoutes = [
   <Route

vite.config.js

@@ -8,7 +8,20 @@ export default defineConfig({
   base: './',
   plugins: [react(), svgo(), svgr(), eslintPlugin()],
   build: {
-    outDir: 'build'
+    outDir: 'build',
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          antd: ['antd'],
+          codemirror: [
+            '@codemirror/lang-javascript',
+            '@codemirror/lang-python' /* etc */
+          ],
+          three: ['three', 'gcode-preview'],
+          'react-vendor': ['react', 'react-dom', 'react-router-dom']
+        }
+      }
+    }
   },
   server: {
     allowedHosts: ['dev.tombutcher.work'],