Epondia · jobbykings · Jun 22, 2026 · Jun 21, 2026
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -1,5 +1,8 @@
 /** @type {import('next').NextConfig} */
 const { i18n } = require('./next-i18next.config');
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
 
 const nextConfig = {
   typescript: {
@@ -26,41 +29,13 @@ const nextConfig = {
   },
   // Performance monitoring configuration
   webpack: (config, { isServer }) => {
-    // Enable bundle analysis in production
-    if (process.env.ANALYZE === 'true') {
-      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-      config.plugins.push(
-        new BundleAnalyzerPlugin({
-          analyzerMode: 'static',
-          openAnalyzer: false,
-        })
-      );
-    }
-
   // Performance optimizations
     // Stub native-only modules that can't run in browser/build
     config.resolve.alias = {
       ...config.resolve.alias,
       brainflow: false,
     };
 
-    config.optimization.splitChunks = {
-      chunks: 'all',
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          name: 'vendors',
-          chunks: 'all',
-        },
-        common: {
-          name: 'common',
-          minChunks: 2,
-          chunks: 'all',
-          enforce: true,
-        },
-      },
-    };
-
     return config;
   },
   // Enable compression
@@ -95,4 +70,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withBundleAnalyzer(nextConfig);
diff --git a/frontend/package.json b/frontend/package.json
@@ -82,7 +82,7 @@
     "husky": "^9.1.7",
     "jest": "^29.6.4",
     "jest-environment-jsdom": "^30.4.1",
-    "next-bundle-analyzer": "^0.6.0",
+    "@next/bundle-analyzer": "^14.0.0",
     "postcss": "^8.4.28",
     "prettier": "^3.0.2",
     "typescript": "^5.1.6"

diff --git a/frontend/src/app/PerformanceInitializer.tsx b/frontend/src/app/PerformanceInitializer.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function PerformanceInitializer() {
+  useEffect(() => {
+    // Dynamically import the performance monitor to keep web-vitals out of initial chunks
+    import('@/lib/performance-monitor').then((mod) => {
+      // Reference it to trigger initialization side effects
+      mod.performanceMonitor;
+    });
+  }, []);
+
+  return null;
+}
diff --git a/frontend/src/app/lab/page.tsx b/frontend/src/app/lab/page.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { VirtualScienceLab } from '../../components/Lab/VirtualScienceLab';
+import { VirtualScienceLab } from '../../components/Lab';
 
 export const metadata: Metadata = {
   title: 'Virtual Science Laboratory — StarkEd',

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
-import { performanceMonitor } from '@/lib/performance-monitor';
+import PerformanceInitializer from './PerformanceInitializer';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -20,16 +20,15 @@ export default function RootLayout({
   children: React.ReactNode;
   params?: { locale?: string };
 }) {
-  if (typeof window !== 'undefined') {
-    performanceMonitor;
-  }
-
   const locale = params?.locale ?? 'en';
   const dir = RTL_LOCALES.has(locale) ? 'rtl' : 'ltr';
 
   return (
     <html lang={locale} dir={dir}>
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <PerformanceInitializer />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/frontend/src/components/ARVR/index.ts b/frontend/src/components/ARVR/index.ts
@@ -1,10 +1,11 @@
-// Core AR/VR Components
-export { WebXREngine } from './WebXREngine';
-export { ModelViewer } from './ModelViewer';
-export { VirtualClassroom } from './VirtualClassroom';
-export { InteractiveSimulation } from './InteractiveSimulation';
-export { GestureControls } from './GestureControls';
-export { PerformanceOptimizer } from './PerformanceOptimizer';
+import dynamic from 'next/dynamic';
+
+export const WebXREngine = dynamic(() => import('./WebXREngine').then(m => m.WebXREngine), { ssr: false });
+export const ModelViewer = dynamic(() => import('./ModelViewer').then(m => m.ModelViewer), { ssr: false });
+export const VirtualClassroom = dynamic(() => import('./VirtualClassroom').then(m => m.VirtualClassroom), { ssr: false });
+export const InteractiveSimulation = dynamic(() => import('./InteractiveSimulation').then(m => m.InteractiveSimulation), { ssr: false });
+export const GestureControls = dynamic(() => import('./GestureControls').then(m => m.GestureControls), { ssr: false });
+export const PerformanceOptimizer = dynamic(() => import('./PerformanceOptimizer').then(m => m.PerformanceOptimizer), { ssr: false });
 
 // Types - only export what is actually exported from source modules
 export type { XRMode, XRSessionState } from './WebXREngine';

diff --git a/frontend/src/components/BCI/index.ts b/frontend/src/components/BCI/index.ts
@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export const BCIDashboard = dynamic(() => import('./BCIDashboard').then(m => m.BCIDashboard), { ssr: false });
diff --git a/frontend/src/components/Lab/index.ts b/frontend/src/components/Lab/index.ts
@@ -1 +1,3 @@
-export { VirtualScienceLab } from './VirtualScienceLab';
+import dynamic from 'next/dynamic';
+
+export const VirtualScienceLab = dynamic(() => import('./VirtualScienceLab').then(m => m.VirtualScienceLab), { ssr: false });
diff --git a/frontend/src/components/Metaverse/index.ts b/frontend/src/components/Metaverse/index.ts
@@ -1,5 +1,7 @@
-export { MetaverseCampus } from './MetaverseCampus';
-export { AvatarCustomizer } from './AvatarCustomizer';
-export { BuildingInterior } from './BuildingInterior';
-export { CampusHUD } from './CampusHUD';
-export { CampusScene } from './CampusScene';
+import dynamic from 'next/dynamic';
+
+export const MetaverseCampus = dynamic(() => import('./MetaverseCampus').then(m => m.MetaverseCampus), { ssr: false });
+export const AvatarCustomizer = dynamic(() => import('./AvatarCustomizer').then(m => m.AvatarCustomizer), { ssr: false });
+export const BuildingInterior = dynamic(() => import('./BuildingInterior').then(m => m.BuildingInterior), { ssr: false });
+export const CampusHUD = dynamic(() => import('./CampusHUD').then(m => m.CampusHUD), { ssr: false });
+export const CampusScene = dynamic(() => import('./CampusScene').then(m => m.CampusScene), { ssr: false });
diff --git a/frontend/src/pages/analytics.tsx b/frontend/src/pages/analytics.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import ProgressDashboard from '../components/analytics/ProgressDashboard'
+import ProgressDashboard from '../components/Analytics/ProgressDashboard'
 
 const AnalyticsPage: React.FC = () => {
   return (

diff --git a/frontend/src/pages/bci-dashboard.tsx b/frontend/src/pages/bci-dashboard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BCIDashboard } from '../components/BCI/BCIDashboard';
+import { BCIDashboard } from '../components/BCI';
 
 const BCIDashboardPage: React.FC = () => {
   return (
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import dynamic from 'next/dynamic';

		export const BCIDashboard = dynamic(() => import('./BCIDashboard').then(m => m.BCIDashboard), { ssr: false });