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?

Does this help? https://stackoverflow.com/questions/53995948/warning-in-budgets-maximum-exceeded-for-initial — , Dec 18 '20 at 20:04
@ChrisG Thanks for the quick reply! I came across that post before and was a bit unsure about increasing the budget (I can't gzip the files). Is increasing the budget a good idea or can I reduce the file size some other way? When I run ```webpack-bundle-analyzer ./dist/client/stats.json```, the total file size is over 6mb which is pretty shocking and I'm guessing that is because of the ```socket.io-client``` module. Is there any way to find out what's taking that much space? ```webpack-bundle-analyzer``` says ```vendor.js``` takes up just more than 6mb) — Milan Ferus-Comelo, Dec 18 '20 at 20:15
Not sure how gzip factors into this, can you add the `budget` part of your `angular.json` to the question? — , Dec 18 '20 at 20:23
@ChrisG Yeah I can, but wasn't sure if that was a good idea. I'll go along with it for now though. Thanks for the help! — Milan Ferus-Comelo, Dec 18 '20 at 20:35

score 50 · Accepted Answer · answered May 26 '21 at 15:07

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.

score 5 · Answer 2 · answered Sep 06 '21 at 11:13

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

Warning: budgets: initial exceeded maximum budget

2 Answers2

Linked