title: Warning: budgets: initial exceeded maximum budget
body: <p>I get the following error when I run <code>npm build --prod</code>:</p>
  <p><code>Error: budgets: initial exceeded maximum budget. Budget 1.00 MB was not met by 500.42 kB with a total of 1.49 MB.</code></p>
  <p>I also get this warning:</p>
  <p><code>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</code></p>
  <p>I'm also importing quite a few Angular Material modules. This is my <code>app.module.ts</code> (It's the only module in my whole project):</p>
  <pre><code>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 { }
  </code></pre>
  <p>How can I fix this issue of exceeding the maximum budget (I think it's the <code>socket.io-client</code> module)? As a side question: Can I optimize the <code>app.module.ts</code> file?</p>