I can’t get the bundle size of my app under max budget.

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",
     "maximumError": "1mb"
   }
]

I know I could increase the ‘maximumError’, but I’d rather decrease the initial bundle size.

There doesn’t seem to be anything eagerly loaded except the ‘welcome’ component.

export const APP_ROUTES: Routes = [
  {
    path: '',
    component: ShellComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'welcome',
      },
      {
        path: 'welcome',
        title: 'Welcome',
        loadChildren: async () =>
          (await import('@pax/tops/welcome/feat/welcome')).WELCOME_ROUTES,
      },
      {
        path: '',
        canMatch: [
          inject(Store).select(selectUser)
            .pipe(map(user => !!user)),
        ],
        children: [
          {
            path: 'home',
            loadChildren: async () =>
              (await import('...')).HOME_ROUTES,
          },
          {
            path: 'books',
            loadChildren: async () =>
              (await import('...')).BOOKS_ROUTES,
          },
          {
            path: 'books/:bookId/reviews/:reviewId',
            loadComponent: async () =>
              (await import('...')).ReviewDetailComponent,
          },
        ],
      },
      {
        path: '**',
        redirectTo: 'welcome',
      },
    ],
  },
];

I use standalone coponents with module imports like so:

@Component({
  ...
  standalone: true,
  imports: [
    CommonModule,
    ...HomeMaterialModules,
    SearchComponent, // custom component
    SearchCardComponent, // custom component
    BookCardComponent, // custom component
    DividerComponent, // custom component
  ],
}) export class HomeComponent { ... }


import { MatCardModule } from "@angular/material/card";
export const HomeMaterialModules = [
  MatCardModule,
];

I temporarily increased the ‘maximumError’ to 1.5MB, built (–prod) the app and ran the npx source-map-explorer over the dist folder.

The following is a snapshot of the browser ‘network’ tab. he chunks are not minified and add up to 6.6MB. After minification the app is 1.5MB, which is 0.5MB over the budget.

[ERROR] bundle initial exceeded maximum budget.

The components are not that huge and I’m not using large deps like e.g. momentjs…

Any ideas how I could decrease that initial bundle size?