Bert Hausmans
8873886f5d
- Convert all route components to lazy-loaded with React.lazy() - Add Suspense boundaries with loading fallback components - Configure manual chunks in Vite for better code organization: - Separate React vendor libraries (react-vendor) - Group components by feature (reports, settings, admin, apps, auth) - Isolate other node_modules (vendor) - Reduce initial bundle from ~1,080 kB to under 500 kB - Components now load on-demand when routes are accessed - Improves initial page load performance and caching
93 lines
3.6 KiB
TypeScript
93 lines
3.6 KiB
TypeScript
import { defineConfig } from 'vite';
|
|
import react from '@vitejs/plugin-react';
|
|
import path from 'path';
|
|
|
|
export default defineConfig({
|
|
plugins: [react()],
|
|
resolve: {
|
|
alias: {
|
|
'@': path.resolve(__dirname, './src'),
|
|
},
|
|
},
|
|
build: {
|
|
rollupOptions: {
|
|
output: {
|
|
manualChunks(id) {
|
|
// Vendor chunks - separate large libraries
|
|
if (id.includes('node_modules')) {
|
|
if (id.includes('react') || id.includes('react-dom') || id.includes('react-router')) {
|
|
return 'react-vendor';
|
|
}
|
|
if (id.includes('clsx')) {
|
|
return 'ui-vendor';
|
|
}
|
|
// Other node_modules go into vendor chunk
|
|
return 'vendor';
|
|
}
|
|
|
|
// Feature-based chunks for components
|
|
if (id.includes('/components/')) {
|
|
if (id.includes('ReportsDashboard') || id.includes('TeamDashboard') ||
|
|
id.includes('GovernanceAnalysis') || id.includes('TechnicalDebtHeatmap') ||
|
|
id.includes('LifecyclePipeline') || id.includes('DataCompletenessScore') ||
|
|
id.includes('ZiRADomainCoverage') || id.includes('FTEPerZiRADomain') ||
|
|
id.includes('ComplexityDynamicsBubbleChart') || id.includes('BusinessImportanceComparison')) {
|
|
return 'reports';
|
|
}
|
|
if (id.includes('ConfigurationV25') || id.includes('DataCompletenessConfig') ||
|
|
id.includes('SchemaConfigurationSettings') || id.includes('DataValidationDashboard') ||
|
|
id.includes('ProfileSettings')) {
|
|
return 'settings';
|
|
}
|
|
if (id.includes('UserManagement') || id.includes('RoleManagement') ||
|
|
id.includes('ArchitectureDebugPage')) {
|
|
return 'admin';
|
|
}
|
|
if (id.includes('BIASyncDashboard') || id.includes('FTECalculator')) {
|
|
return 'apps';
|
|
}
|
|
if (id.includes('Login') || id.includes('ForgotPassword') ||
|
|
id.includes('ResetPassword') || id.includes('AcceptInvitation')) {
|
|
return 'auth';
|
|
}
|
|
}
|
|
},
|
|
},
|
|
},
|
|
chunkSizeWarningLimit: 600, // Increase limit slightly since we're code-splitting
|
|
},
|
|
server: {
|
|
port: 5173,
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:3001',
|
|
changeOrigin: true,
|
|
// Ensure cookies are forwarded correctly
|
|
configure: (proxy, _options) => {
|
|
proxy.on('proxyRes', (proxyRes, req, res) => {
|
|
// Rewrite Set-Cookie headers to work with the proxy
|
|
// Change domain from backend (localhost:3001) to frontend (localhost:5173)
|
|
const setCookieHeaders = proxyRes.headers['set-cookie'];
|
|
if (setCookieHeaders) {
|
|
const rewritten = Array.isArray(setCookieHeaders)
|
|
? setCookieHeaders.map(cookie => {
|
|
// Remove domain attribute or rewrite it to work with proxy
|
|
return cookie
|
|
.replace(/;\s*domain=[^;]+/gi, '') // Remove domain
|
|
.replace(/;\s*secure/gi, ''); // Remove secure in dev (if needed)
|
|
})
|
|
: [setCookieHeaders].map(cookie => {
|
|
return cookie
|
|
.replace(/;\s*domain=[^;]+/gi, '')
|
|
.replace(/;\s*secure/gi, '');
|
|
});
|
|
proxyRes.headers['set-cookie'] = rewritten;
|
|
console.log('[Vite Proxy] Rewritten Set-Cookie headers:', rewritten);
|
|
}
|
|
});
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|