作者:湘西有堵墙 | 来源:互联网 | 2023-07-10 15:55
运行时出现以下错误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:UsersPATH_TO_FILEsocket.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
文件吗?
回答
这些是您的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"
}
],
您可以给出适合您限制的值。