Added lazy loading and package size optimization

angular.json

@@ -38,21 +38,43 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "1.5MB",
+                  "maximumError": "2MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "6kB",
+                  "maximumError": "10kB"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "optimization": {
+                "scripts": true,
+                "styles": true,
+                "fonts": true
+              },
+              "sourceMap": false,
+              "extractLicenses": true,
+              "namedChunks": false,
+              "aot": true,
+              "buildOptimizer": true,
+              "vendorChunk": false,
+              "commonChunk": false,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
             },
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "namedChunks": true,
+              "buildOptimizer": false,
+              "vendorChunk": true,
+              "commonChunk": true
             }
           },
           "defaultConfiguration": "production"
@@ -97,7 +119,6 @@
     }
   },
   "cli": {
-    "analytics": "4f33e7fa-04db-4ebd-b6fd-8b5438dbb3ff",
-    "root": ""
+    "analytics": "4f33e7fa-04db-4ebd-b6fd-8b5438dbb3ff"
   }
 }

src/app/app.routes.ts

@@ -1,14 +1,35 @@
 import { Routes } from '@angular/router';
-import { AboutComponent } from './layout/components/about/about.component';
-import { ContactComponent } from './layout/components/contact/contact.component';
 import { HeroComponent } from './layout/components/hero/hero.component';
-import { ProjectsListComponent } from './features/project-display/components/projects-list/projects-list.component';
-import { ExperienceComponent } from './layout/components/experience/experience.component';
 
 export const routes: Routes = [
   { path: '', component: HeroComponent },
-  { path: 'about', component: AboutComponent },
-  { path: 'contact', component: ContactComponent },
-  { path: 'projects', component: ProjectsListComponent },
-  { path: 'experience', component: ExperienceComponent },
+  {
+    path: 'about',
+    loadComponent: () =>
+      import('./layout/components/about/about.component').then(
+        (c) => c.AboutComponent,
+      ),
+  },
+  {
+    path: 'contact',
+    loadComponent: () =>
+      import('./layout/components/contact/contact.component').then(
+        (c) => c.ContactComponent,
+      ),
+  },
+  {
+    path: 'projects',
+    loadComponent: () =>
+      import(
+        './features/project-display/components/projects-list/projects-list.component'
+      ).then((c) => c.ProjectsListComponent),
+  },
+  {
+    path: 'experience',
+    loadComponent: () =>
+      import('./layout/components/experience/experience.component').then(
+        (c) => c.ExperienceComponent,
+      ),
+  },
+  { path: '**', redirectTo: '' }, // Wildcard route for 404 handling
 ];