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
2025-11-26 09:34:18 +10:00
parent da6992372f
commit d6b784ad11
20 changed files with 219 additions and 39 deletions
@@ -1,13 +1,57 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { visualizer } from  'rollup-plugin-visualizer';
+
+function packageNameFromId(id: string) {
+  // Extract the package name from a node_modules path, including scoped packages.
+  const match = id.match(/node_modules\/((?:@[^/]+\/)?[^/]+)/);
+  return match ? match[1] : null;
+}

 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), visualizer({ filename: 'dist/stats.html', open: true })],
  server: {
    port: 5173,
  },
  build: {
    outDir: 'dist',
+    minify: 'esbuild', // fast minifier
+    rollupOptions: {
+      output: {
+        manualChunks(id: string) {
+          if (!id) return;
+          if (id.includes('node_modules')) {
+            // Always group react + router into one chunk
+            if (id.includes('react') || id.includes('react-dom') || id.includes('react-router-dom')) {
+              return 'react-vendor';
+            }
+
+            // MUI splits: specific first, generic later
+            if (id.includes('@mui/icons-material')) return 'mui-icons';
+            if (id.includes('@mui/material/esm/styles') || id.includes('@mui/material/styles')) return 'mui-styles';
+            // remaining @mui material code -> mui-core (covers components, utils, etc.)
+            if (id.includes('@mui/material') || id.includes('@mui/base')) return 'mui-core';
+            // emotion / styled engine split
+            if (id.includes('@emotion') || id.includes('@mui/styled-engine')) return 'mui-styled';
+
+
+            // Keep large libs in their own chunk to avoid a huge 'vendor'
+            if (id.includes('jszip')) return 'jszip';
+            if (id.includes('papaparse')) return 'papaparse';
+            if (id.includes('dexie')) return 'dexie';
+            if (id.includes('@zxing')) return 'zxing';
+
+            // Default: create a per-package chunk name so vendor is split up.
+            const pkg = packageNameFromId(id);
+            if (pkg) {
+              // normalize '@' from scoped packages (can't use '/' in filenames)
+              return `npm.${pkg.replace('/', '__').replace('@', '')}`;
+            }
+            return 'vendor';
+          }
+        },
+      },
+    },
  },
  test: {
    include: ['src/**/*.{test,spec}.{ts,tsx}'],