Warning: budgets: initial exceeded maximum budget

Question

I get the following error when I run npm build --prod:

Error: budgets: initial exceeded maximum budget. Budget 1.00 MB was not met by 500.42 kB with a total of 1.49 MB.

I also get this warning:

Warning: C:\Users\PATH_TO_FILE\socket.service.ts depends on 'socket.io-client'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

I'm also importing quite a few Angular Material modules. This is my app.module.ts (It's the only module in my whole project):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { AppComponent } from './app.component';
import { SocketService } from './services/socket.service';
import { AppRoutingModule } from './app-routing.module';

import { ClipboardModule } from '@angular/cdk/clipboard';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatIconModule } from '@angular/material/icon';
import { MatChipsModule } from '@angular/material/chips';
import { MatSliderModule } from '@angular/material/slider';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatDialogModule } from '@angular/material/dialog';

import { AdminPanelComponent } from './components/admin-panel/admin-panel.component';
import { ChatMessageComponent } from './components/chat-message/chat-message.component';
import { ChatPanelComponent } from './components/chat-panel/chat-panel.component';
import { DrawingPanelComponent } from './components/drawing-panel/drawing-panel.component';
import { PlayerComponent } from './components/player/player.component';
import { PlayersPanelComponent } from './components/players-panel/players-panel.component';
import { ToolsPanelComponent } from './components/tools-panel/tools-panel.component';
import { ChatMessageDirective } from './directives/chat-message.directive';
import { PlayerDirective } from './directives/player.directive';
import { GameManagerComponent } from './components/game-manager/game-manager.component';
import { ArtistOptionsComponent } from './components/artist-options/artist-options.component';
import { InfoPanelComponent } from './components/info-panel/info-panel.component';
import { DialogComponent } from './components/dialog/dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    AdminPanelComponent,
    PlayersPanelComponent,
    DrawingPanelComponent,
    ChatPanelComponent,
    PlayersPanelComponent,
    ToolsPanelComponent,
    ChatMessageComponent,
    ChatMessageDirective,
    PlayerDirective,
    PlayerComponent,
    GameManagerComponent,
    ArtistOptionsComponent,
    InfoPanelComponent,
    DialogComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FontAwesomeModule,
    ClipboardModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatTooltipModule,
    MatIconModule,
    MatChipsModule,
    MatSliderModule,
    MatButtonToggleModule,
    MatDialogModule
  ],
  providers: [SocketService],
  bootstrap: [AppComponent]
})
export class AppModule { }

How can I fix this issue of exceeding the maximum budget (I think it's the socket.io-client module)? As a side question: Can I optimize the app.module.ts file?

Answer 1

Those are configurations in your angular.json. Locate it and then look for budgets.

Now you can change the values there to your need.

ex:

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

to

"budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],

You can give values that fits you limit.

Answer 2

You can always increase the threshold by increasing the budget limit, but you should look for ways to reduce your initial budgets. You can use source-map-explorer to analyze each and every module in your application and determines what really need and not important to start the application.

For example, you can remove some of the dependencies and features from your app module which do not need to start the app and take those to a lazy loaded module. This would reduce your initial app loading time by reducing initial bundle size.

The below picture is an example of initial bundles which an angular app needs when it starts.

Refer this article if you need to setup source-map-explorer to your project. https://dev.to/salimchemes/analyzing-angular-bundle-with-source-map-explorer-341