Moved to lazy loading modules and configured build chunking

modified:   package-lock.json
	modified:   package.json
	modified:   src/App.tsx
	modified:   src/screens/ActivePickListScreen.test.tsx
	modified:   src/screens/ActivePickListScreen.tsx
	modified:   src/screens/BarcodeScannerScreen.tsx
	modified:   src/screens/HomeScreen.tsx
	modified:   src/screens/ImportExportScreen.tsx
	modified:   src/screens/ManageAreasScreen.test.tsx
	modified:   src/screens/ManageAreasScreen.tsx
	modified:   src/screens/ManageCategoriesScreen.test.tsx
	modified:   src/screens/ManageCategoriesScreen.tsx
	modified:   src/screens/ManageProductsScreen.test.tsx
	modified:   src/screens/ManageProductsScreen.tsx
	modified:   src/screens/PickListsScreen.test.tsx
	modified:   src/screens/PickListsScreen.tsx
	modified:   src/screens/StartPickListScreen.test.tsx
	modified:   src/screens/StartPickListScreen.tsx
	modified:   tsconfig.json
	modified:   vite.config.ts

src/App.tsx

@@ -2,16 +2,18 @@ import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { DBProvider } from './context/DBProvider';
 import { AppLayout } from './components/AppLayout';
-import { HomeScreen } from './screens/HomeScreen';
-import { StartPickListScreen } from './screens/StartPickListScreen';
-import { PickListsScreen } from './screens/PickListsScreen';
-import { ActivePickListScreen } from './screens/ActivePickListScreen';
-import { ManageProductsScreen } from './screens/ManageProductsScreen';
-import { ManageAreasScreen } from './screens/ManageAreasScreen';
-import { ManageCategoriesScreen } from './screens/ManageCategoriesScreen';
-import { BarcodeScannerScreen } from './screens/BarcodeScannerScreen';
+import React, { Suspense, lazy } from 'react';
 import { useServiceWorker } from './hooks/useServiceWorker';
-import { ImportExportScreen } from './screens/ImportExportScreen';
+
+const HomeScreen = lazy(() => import('./screens/HomeScreen'));
+const StartPickListScreen = lazy(() => import('./screens/StartPickListScreen'));
+const PickListsScreen = lazy(() => import('./screens/PickListsScreen'));
+const ActivePickListScreen = lazy(() => import('./screens/ActivePickListScreen'));
+const ManageProductsScreen = lazy(() => import('./screens/ManageProductsScreen'));
+const ManageAreasScreen = lazy(() => import('./screens/ManageAreasScreen'));
+const ManageCategoriesScreen = lazy(() => import('./screens/ManageCategoriesScreen'));
+const BarcodeScannerScreen = lazy(() => import('./screens/BarcodeScannerScreen'));
+const ImportExportScreen = lazy(() => import('./screens/ImportExportScreen'));
 
 const theme = createTheme({
   palette: {
@@ -25,19 +27,21 @@ const theme = createTheme({
 const AppRoutes = () => {
   useServiceWorker();
   return (
-    <Routes>
-      <Route element={<AppLayout />}>
-        <Route path="/" element={<HomeScreen />} />
-        <Route path="/start" element={<StartPickListScreen />} />
-        <Route path="/pick-lists" element={<PickListsScreen />} />
-        <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
-        <Route path="/products" element={<ManageProductsScreen />} />
-        <Route path="/categories" element={<ManageCategoriesScreen />} />
-        <Route path="/areas" element={<ManageAreasScreen />} />
-        <Route path="/scan" element={<BarcodeScannerScreen />} />
-        <Route path="/data" element={<ImportExportScreen />} />
-      </Route>
-    </Routes>
+    <Suspense fallback={<div>Loading…</div>}>
+      <Routes>
+        <Route element={<AppLayout />}>
+          <Route path="/" element={<HomeScreen />} />
+          <Route path="/start" element={<StartPickListScreen />} />
+          <Route path="/pick-lists" element={<PickListsScreen />} />
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+          <Route path="/products" element={<ManageProductsScreen />} />
+          <Route path="/categories" element={<ManageCategoriesScreen />} />
+          <Route path="/areas" element={<ManageAreasScreen />} />
+          <Route path="/scan" element={<BarcodeScannerScreen />} />
+          <Route path="/data" element={<ImportExportScreen />} />
+        </Route>
+      </Routes>
+    </Suspense>
   );
 };
 

src/screens/ActivePickListScreen.test.tsx

@@ -2,10 +2,11 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { ActivePickListScreen } from './ActivePickListScreen';
+import ActivePickListScreen from './ActivePickListScreen';
 import { PickItem } from '../models/PickItem';
 import { Product } from '../models/Product';
 
+//const ActivePickListScreen = lazy(() => import('./screens/ActivePickListScreen'));
 const addMock = vi.fn();
 const updateMock = vi.fn();
 const pickItemsMock = vi.fn<() => PickItem[]>();

src/screens/ActivePickListScreen.tsx

@@ -34,7 +34,7 @@ import { ProductAutocomplete } from '../components/ProductAutocomplete';
 
 const normalizeName = (name: string) => name.trim().toLowerCase();
 
-export const ActivePickListScreen = () => {
+const ActivePickListScreen = () => {
   const { id } = useParams();
   const pickList = usePickList(id);
   const items = usePickItems(id);
@@ -558,3 +558,5 @@ export const ActivePickListScreen = () => {
     </Container>
   );
 };
+
+export default ActivePickListScreen

src/screens/BarcodeScannerScreen.tsx

@@ -26,7 +26,7 @@ interface ProductLookup {
   pickLists: { list: PickList; area?: Area }[];
 }
 
-export const BarcodeScannerScreen = () => {
+const BarcodeScannerScreen = () => {
   const db = useDatabase();
   const navigate = useNavigate();
   const [lastCode, setLastCode] = useState('');
@@ -193,3 +193,5 @@ export const BarcodeScannerScreen = () => {
     </Container>
   );
 };
+
+export default BarcodeScannerScreen

src/screens/HomeScreen.tsx

@@ -1,7 +1,7 @@
 import { Button, Container, Stack, Typography } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 
-export const HomeScreen = () => (
+const HomeScreen = () => (
   <Container sx={{ py: 4 }}>
     <Typography variant="h4" gutterBottom>
       StockFill
@@ -28,3 +28,5 @@ export const HomeScreen = () => (
     </Stack>
   </Container>
 );
+
+export default HomeScreen;

src/screens/ImportExportScreen.tsx

@@ -19,7 +19,7 @@ import { ImportExportLog } from '../models/ImportExportLog';
 
 const templateFiles: { label: string; file: string }[] = [{ label: 'Products', file: 'products_template.csv' }];
 
-export const ImportExportScreen = () => {
+const ImportExportScreen = () => {
   const db = useDatabase();
   const [logLines, setLogLines] = useState<string[]>([]);
   const [history, setHistory] = useState<ImportExportLog[]>([]);
@@ -176,3 +176,5 @@ export const ImportExportScreen = () => {
     </Box>
   );
 };
+
+export default ImportExportScreen

src/screens/ManageAreasScreen.test.tsx

@@ -2,7 +2,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
-import { ManageAreasScreen } from './ManageAreasScreen';
+import ManageAreasScreen from './ManageAreasScreen';
 
 const areasMock = [{ id: 'area-1', name: 'Front Counter', created_at: 0, updated_at: 0 }];
 

src/screens/ManageAreasScreen.tsx

@@ -20,7 +20,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useAreas } from '../hooks/dataHooks';
 import { useDatabase } from '../context/DBProvider';
 
-export const ManageAreasScreen = () => {
+const ManageAreasScreen = () => {
   const db = useDatabase();
   const areas = useAreas();
   const [name, setName] = useState('');
@@ -128,3 +128,5 @@ export const ManageAreasScreen = () => {
     </Container>
   );
 };
+
+export default ManageAreasScreen

src/screens/ManageCategoriesScreen.test.tsx

@@ -2,7 +2,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { ManageCategoriesScreen } from './ManageCategoriesScreen';
+import ManageCategoriesScreen from './ManageCategoriesScreen';
 
 const categoriesMock = [{ id: 'cat-1', name: 'Snacks', created_at: 0, updated_at: 0 }];
 const productsMock = [

src/screens/ManageCategoriesScreen.tsx

@@ -20,7 +20,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useDatabase } from '../context/DBProvider';
 import { useCategories, useProducts } from '../hooks/dataHooks';
 
-export const ManageCategoriesScreen = () => {
+const ManageCategoriesScreen = () => {
   const db = useDatabase();
   const categories = useCategories();
   const products = useProducts();
@@ -198,3 +198,5 @@ const deleteCategory = async (categoryId: string, categoryName: string) => {
     </Container>
   );
 };
+
+export default ManageCategoriesScreen

src/screens/ManageProductsScreen.test.tsx

@@ -4,7 +4,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
-import { ManageProductsScreen } from './ManageProductsScreen';
+import ManageProductsScreen from './ManageProductsScreen';
 
 let mockScannedBarcode = '123456';
 const mockUseProducts = vi.fn();

src/screens/ManageProductsScreen.tsx

@@ -24,7 +24,7 @@ import { BarcodeScannerView } from '../components/BarcodeScannerView';
 import { ExternalProductInfo, fetchProductFromOFF } from '../modules/openFoodFacts';
 import { DEFAULT_BULK_NAME, DEFAULT_UNIT_TYPE, Product } from '../models/Product';
 
-export const ManageProductsScreen = () => {
+const ManageProductsScreen = () => {
   const db = useDatabase();
   const products = useProducts();
   const categories = useCategories();
@@ -505,3 +505,5 @@ export const ManageProductsScreen = () => {
     </Container>
   );
 };
+
+export default ManageProductsScreen

src/screens/PickListsScreen.test.tsx

@@ -2,7 +2,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { PickListsScreen } from './PickListsScreen';
+import PickListsScreen from './PickListsScreen';
 
 let areasMock = [
   { id: 'area-1', name: 'Front Counter', created_at: 0, updated_at: 0 },

src/screens/PickListsScreen.tsx

@@ -22,7 +22,7 @@ import { usePickLists, useAreas } from '../hooks/dataHooks';
 import { useDatabase } from '../context/DBProvider';
 import { PickList } from '../models/PickList';
 
-export const PickListsScreen = () => {
+const PickListsScreen = () => {
   const lists = usePickLists();
   const areas = useAreas();
   const db = useDatabase();
@@ -176,3 +176,5 @@ export const PickListsScreen = () => {
     </Container>
   );
 };
+
+export default PickListsScreen

src/screens/StartPickListScreen.test.tsx

@@ -2,7 +2,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { StartPickListScreen } from './StartPickListScreen';
+import StartPickListScreen from './StartPickListScreen';
 
 const navigateMock = vi.fn();
 

src/screens/StartPickListScreen.tsx

@@ -15,7 +15,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useAreas, useCategories } from '../hooks/dataHooks';
 import { useDatabase } from '../context/DBProvider';
 
-export const StartPickListScreen = () => {
+const StartPickListScreen = () => {
   const areas = useAreas();
   const categories = useCategories();
   const db = useDatabase();
@@ -175,3 +175,5 @@ export const StartPickListScreen = () => {
     </Container>
   );
 };
+
+export default StartPickListScreen