Предупреждение: бюджеты: первоначальный превышен максимальный бюджет

Я получаю следующую ошибку при запуске 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?

Это помогает? stackoverflow.com/questions/53995948/…

user5734311 18.12.2020 21:04

@ChrisG Спасибо за быстрый ответ! Я наткнулся на этот пост раньше и немного сомневался в увеличении бюджета (я не могу сжимать файлы). Является ли увеличение бюджета хорошей идеей или я могу уменьшить размер файла каким-либо другим способом? Когда я запускаю webpack-bundle-analyzer ./dist/client/stats.json, общий размер файла превышает 6 МБ, что довольно шокирует, и я предполагаю, что это из-за модуля socket.io-client. Есть ли способ узнать, что занимает так много места? webpack-bundle-analyzer говорит vendor.js занимает чуть больше 6мб)

Milan Ferus-Comelo 18.12.2020 21:15

Не знаете, как gzip влияет на это, можете ли вы добавить budget часть вашего angular.json к вопросу?

user5734311 18.12.2020 21:23

@ChrisG Да, я могу, но не был уверен, что это хорошая идея. Хотя пока я соглашусь с этим. Спасибо за помощь!

Milan Ferus-Comelo 18.12.2020 21:35
Загадки Python - Генерация простых чисел!
Загадки Python - Генерация простых чисел!
Обычно существует несколько способов решения задач даже пограничной сложности. Как же определить оптимальное и эффективное решение?
18
4
22 586
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это конфигурации в вашем 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"
                }
              ],

Вы можете указать значения, которые соответствуют вашему лимиту.

Вы всегда можете увеличить порог, увеличив лимит бюджета, но вам следует искать способы уменьшить ваши первоначальные бюджеты. Вы можете использовать source-map-explorer для анализа каждого модуля в вашем приложении и определения того, что действительно нужно, а что не важно для запуска приложения.

Например, вы можете удалить некоторые зависимости и функции из вашего модуля приложения, которые не требуют запуска приложения, и перенести их в модуль с отложенной загрузкой. Это сократит время первоначальной загрузки приложения за счет уменьшения исходного размера пакета.

На приведенном ниже рисунке показан пример начальных пакетов, которые нужны угловому приложению при запуске.

Обратитесь к этой статье, если вам нужно настроить source-map-explorer для вашего проекта. https://dev.to/salimchemes/analyzing-angular-bundle-with-source-map-explorer-341

Другие вопросы по теме

Похожие вопросы

Безопасна ли распаковка вариативного трюка с использованием массива (или initializer_list)?
Проверка того, находятся ли значения в pandas df внутри списков в столбцах второго df
Эффективное преобразование сегментированной наземной истины в контурное изображение с помощью Numpy
Как оптимизировать этот код оператора воздушного потока, чтобы использовать минимальную оперативную память для рабочего сельдерея?
Пакет R OMPR - Ограничение количества выбранных уникальных переменных компонентов
Как я могу оптимизировать скорость этого алгоритма? Джанго и Javascript
Алгоритм быстрой свертки имеет разные результаты по сравнению с обычным алгоритмом свертки?
Оптимизация python DFS (цикл for неэффективен)
Как использовать разные оптимизаторы для каждого слоя модели Pytorch?
Оптимизация (перекомпиляция) наследования виртуальных методов для каждого производного класса