Chunk Analysis: chunk-P3VKQXNQ.js (1.78 MB)

Date: November 25, 2025
Chunk: chunk-P3VKQXNQ.js
Size: 1.78 MB raw (257.02 kB compressed)
Status: ⚠️ Large initial chunk

📦 What's in This Chunk

Based on analysis of app.config.ts and core/modules.ts, this chunk contains all eagerly imported libraries and modules that are loaded at application startup.

🔴 Major Contributors (Eagerly Imported)

1. Storage System (~200-300 KB)

// From app.config.ts
import { provideIntelligentStorage, provideUserScopedStorage, UserContextService, GgStorage, provideHttpMongoDBSync } from '@storage-system';

• Why: Required for app initialization
• Impact: High - Core infrastructure

2. Core Angular Services (~300-400 KB)

// From app.config.ts
import { RealtimeSyncService, SpaceService, PagesService, FlowsService, SyncEngineService, MigrationService } from '@libs-foundational/core-angular';

• Why: Core services needed at startup
• Impact: High - Critical app services

3. Singularity Library (~300-400 KB)

// From app.config.ts
import { OrchestrationService, EditorBridgeService, SpaceMapBridgeService, StorageBridgeService, WidgetFlowExecutorService } from '@libs-structural/singularity-lib';
import { SingularityManifest } from '@libs-structural/singularity-lib';

// From core/modules.ts
import { SingularityModule } from '@libs-structural/singularity-lib';

• Why: Module registration + service providers
• Impact: High - Large library

4. Editor Web Library (~400-500 KB)

// From app.config.ts
import { EditorMock, EditorManifest, SaveCurrentPageAction, ExportPageAsJSONAction, ImportPageFromJSONAction, GetCurrentPageStateAction, AddWidgetAction, OpenPageInEditorAction, WidgetRegistryService } from '@libs-structural/editor-web-lib';

// From core/modules.ts
import { EditorModule } from '@libs-structural/editor-web-lib';

• Why: Module registration + actions + services
• Impact: Very High - Largest contributor

5. Space Map Library (~200-300 KB)

// From app.config.ts
import { BACKEND_API_URL } from '@space-map-lib';
import { SpaceMapManifest } from '@space-map-lib';

// From core/modules.ts
import { SpaceMapModule } from '@space-map-lib';

• Why: Module registration + configuration
• Impact: Medium-High

6. Modularity Library (~200-300 KB)

// From app.config.ts
import { ModularityManifest } from '@libs-structural/modularity-lib';

// From core/modules.ts
import { ModularityModule } from '@libs-structural/modularity-lib';

• Why: Module registration
• Impact: Medium-High

7. Theme Runtime (~100-200 KB)

// From app.config.ts
import { provideUnifiedThemeSystem, THEME_INITIALIZER_PROVIDER, ThemeManagerService, ThemeLoggerService } from '@theme-runtime';

• Why: Theme system initialization
• Impact: Medium - Required for theming

8. Core Libraries (~200-300 KB combined)

// From app.config.ts
import { ModuleRegistryService } from '@libs-core/module-base';
import { ActionRegistryService } from '@libs-core/action-registry';
import { provideLogSystem, LoggerService, ConsoleAppender } from '@libs-core/log-system';
import { mockHttpInterceptor, MockInterceptorConfig } from '@libs-core/mock-api';
import { securityMocks } from '@libs-core/security';

• Why: Core infrastructure
• Impact: Medium - Required services

9. Widget System (~100-200 KB)

// From app.config.ts
import { WIDGET_FACTORIES_INITIALIZER, initializeWidgetModules } from '@widgets';
import { WidgetsManagerManifest } from '@libs-widgets/widgets-manager';

• Why: Widget initialization
• Impact: Medium

10. Business Modules (~200-300 KB combined)

// From core/modules.ts
import { ProductCatalogModule } from '@module/product-catalog';
import { BlogModule } from '@module/blog';
import { PortfolioModule } from '@module/portfolio';
import { SaaSModule } from '@module/saas';

• Why: Module registration (decorators must execute)
• Impact: Medium - Could be lazy-loaded

11. Layout Modules (~100-200 KB combined)

// From app.config.ts
import { SplitSidebarTemplateModule } from '@module/layout/split-sidebar';
import { TwoColumnEqualTemplateModule } from '@module/layout/two-column-equal';
import { ThreeColumnEqualTemplateModule } from '@module/layout/three-column-equal';
import { HeaderContentFooterTemplateModule } from '@module/layout/header-content-footer';
import { DashboardTemplateModule } from '@module/layout/dashboard';
import { CustomTemplateModule } from '@module/layout/custom';

• Why: Template modules for modular universe builder
• Impact: Medium - Could be lazy-loaded

12. UI Libraries (~100-200 KB combined)

// From app.config.ts
import { PreviewGeneratorService } from '@shared-ui';
import { authInterceptor, AUTH_API_URL, AuthService, GuestAuthService } from '@auth-ui';
import { IconService } from '@libs-ui/ux-icons';

• Why: UI services needed at startup
• Impact: Low-Medium

13. Core Models (~50-100 KB)

// From app.config.ts
import { PageWorldSyncService, ContentRegistryService, UnifiedNavigationService } from '@libs-foundational/core-models';

• Why: Model services
• Impact: Low

🎯 Why These Are Eagerly Loaded

1. Module Registration Pattern

// core/modules.ts forces eager loading
import { SingularityModule } from '@libs-structural/singularity-lib';
const platformModules = [SingularityModule, EditorModule, ...];
void allModules; // Prevents tree-shaking

Reason: @ModuleDecorator decorators must execute at app startup to register modules with the module-integrator system.

2. Provider Configuration

// app.config.ts requires services at startup
providers: [
  provideIntelligentStorage({ ... }),
  provideUnifiedThemeSystem({ ... }),
  SpaceService,
  PagesService,
  // ... many more
]

Reason: Angular's dependency injection requires providers to be available at app initialization.

3. Initialization Requirements

• Storage system must initialize before app renders
• Theme system must load before UI renders
• Module registry must be populated before routing
• Widget factories must register before editor loads

📊 Size Breakdown Estimate

🔍 Root Cause

The chunk is large because:

1. Module Registration Pattern: All modules must be imported to execute decorators
2. Eager Service Loading: Many services are required at app startup
3. No Lazy Loading: Business modules and layout modules are eagerly imported
4. Large Structural Libraries: Editor, Singularity, and Space Map are substantial libraries

💡 Optimization Opportunities

1. Lazy Load Business Modules (High Impact)

Current: All business modules eagerly imported

// core/modules.ts
import { ProductCatalogModule } from '@module/product-catalog';
import { BlogModule } from '@module/blog';

Optimization: Use dynamic imports for module registration

// Only register modules when needed
const loadBusinessModules = async () => {
  const { ProductCatalogModule } = await import('@module/product-catalog');
  // Register module dynamically
};

Impact: Could reduce chunk by ~200-300 KB

2. Lazy Load Layout Modules (Medium Impact)

Current: All layout templates eagerly imported

import { SplitSidebarTemplateModule } from '@module/layout/split-sidebar';

Optimization: Load templates on-demand when creating new pages Impact: Could reduce chunk by ~100-200 KB

3. Defer Non-Critical Services (Medium Impact)

Current: Many services loaded at startup Optimization: Use APP_INITIALIZER to defer non-critical services Impact: Could reduce initial load by ~100-200 KB

4. Split Large Libraries (Low Impact - Already Attempted)

Current: Vite manual chunks not working Optimization: Investigate Angular-specific chunk splitting options Impact: Could improve caching but won't reduce total size

📝 Summary

chunk-P3VKQXNQ.js contains:

• ✅ All eagerly imported libraries from app.config.ts
• ✅ All module registrations from core/modules.ts
• ✅ Core infrastructure (storage, theme, logging, security)
• ✅ Large structural libraries (editor, singularity, space-map, modularity)
• ✅ Business modules (product-catalog, blog, portfolio, saas)
• ✅ Layout modules (all template modules)

Total: ~1.78 MB of eagerly loaded code

Next Steps:

1. Consider lazy loading business modules
2. Defer non-critical service initialization
3. Investigate Angular-specific chunk splitting options