警告：预算：初始超出最大预算

Question

当我运行 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.

我也收到这个警告：

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

我还导入了很多 Angular Material 模块。这是我的app.module.ts（这是我整个项目中唯一的模块）：

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 { }

如何解决超出最大预算的问题（我认为是 socket.io-client 模块）？作为附带问题：我可以优化 app.module.ts 文件吗？

Answer 1

这些是您 angular.json 中的配置。找到它，然后寻找预算。

现在您可以根据需要更改那里的值。

例如：

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

至

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

您可以给出适合您限制的值。

Answer 2

您始终可以通过提高预算限额来提高阈值，但您应该寻找降低初始预算的方法。您可以使用 source-map-explorer 来分析应用程序中的每个模块，并确定启动应用程序真正需要和不重要的内容。

例如，您可以从应用程序模块中删除一些不需要启动应用程序的依赖项和功能，并将它们带到延迟加载的模块中。这将通过减少初始包大小来减少您的初始应用加载时间。

下图是 angular 应用启动时需要的初始包示例。

如果您需要为您的项目设置 source-map-explorer，请参阅本文。 https://dev.to/salimchemes/analyzing-angular-bundle-with-source-map-explorer-341

警告：预算：初始超出最大预算

Warning: budgets: initial exceeded maximum budget

optimization

socket.io

angular-cli