ПРЕДУПРЕЖДЕНИЕ в бюджетах, превышен максимум для начального

155

Когда я собираю свой проект angular 7 с помощью --prod, у меня есть предупреждение о бюджетах.

У меня есть проект angular 7, я хочу его построить, но у меня есть предупреждение:

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

это детали чанка:

chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 kB  [rendered]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.13d1eb792af7c2f359ed.js (main) 3.34 MB [initial] [rendered]
chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58.2 kB [initial] [rendered]
chunk {3} styles.33b11ad61bf10bb992bb.css (styles) 379 kB [initial] [rendered]

какие именно бюджеты? и как мне ими управлять?

Масуд Бимар
источник
4
Попробуйте сжать ваши изображения в активах вместо редактирования файла angular.json
Ахсан
@ Ахсан, вот что я сделал. По-прежнему то же сообщение. Не уверен, что дело в активах.
Emerica
@Curse Wee, мой новый ответ и проверьте ссылки
Масуд Бимар

Ответы:

253

Откройте файл angular.json и найдите budgetsключевое слово.

Должно получиться так:

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

Как вы, наверное, догадались, вы можете увеличить maximumWarningзначение, чтобы предотвратить это предупреждение, то есть:

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", <===
      "maximumError": "5mb"
   }
]

Что означают бюджеты ?

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

В нашем случае бюджет - это предел размеров пакетов.

Смотрите также:

yurzui
источник
2
Вы можете объяснить, что такое бюджет?
Stack Overflow
3
@StackOverflow Added
yurzui
2
Спасибо @yurzui за быстрый ответ. Это новая функция в Angular 7? Мы не видели этой ошибки в angular 5. Означает ли это, что мы что-то делаем не так?
Stack Overflow
2
@StackOverflow был добавлен в @angular/cli@7Смотрите также, что нового в ng7, здесь blog.angular.io/… With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI.
yurzui
23
как оптимизировать, чтобы уменьшить размер использованного бюджета? вместо того, чтобы увеличивать его ...
deadManN
76

Что такое Angular CLI Budgets? Бюджеты - одна из менее известных функций Angular CLI. Это довольно маленькая, но очень интересная функция!

По мере роста функциональности приложений они также увеличиваются в размерах. Бюджеты - это функция в Angular CLI, которая позволяет вам устанавливать пороговые значения бюджета в вашей конфигурации, чтобы гарантировать, что части вашего приложения остаются в установленных вами границах - Официальная документация

Или, другими словами, мы можем описать наше приложение Angular как набор скомпилированных файлов JavaScript, называемых пакетами, которые создаются в процессе сборки. Угловые бюджеты позволяют нам настраивать ожидаемые размеры этих пакетов. Более того, мы можем настроить пороги для условий, когда мы хотим получить предупреждение или даже не выполнить сборку с ошибкой, если размер пакета выходит из-под контроля!

Как определить бюджет? Угловые бюджеты определены в файле angular.json. Бюджеты определяются для каждого проекта, что имеет смысл, поскольку у каждого приложения в рабочей области разные потребности.

С прагматической точки зрения имеет смысл только определять бюджеты для производственных сборок. Сборка Prod создает пакеты с «истинным размером» после применения всех оптимизаций, таких как «встряхивание дерева» и минимизация кода.

Ой, ошибка сборки! Превышен максимальный размер пакета. Это отличный сигнал, который говорит нам, что что-то пошло не так ...

  1. Возможно, мы поэкспериментировали с нашей функцией и не очистили должным образом
  2. Наши инструменты могут пойти не так и выполнить автоматический импорт неправильно, или мы выберем плохой элемент из предложенного списка импорта.
  3. Мы можем импортировать данные из ленивых модулей в неподходящие места
  4. Наша новая функция просто очень большая и не вписывается в существующие бюджеты

Первый подход: сжаты ли ваши файлы в сжатом виде?

Вообще говоря, размер gzip-файла составляет лишь около 20% от размера исходного файла, что может значительно сократить время начальной загрузки вашего приложения. Чтобы проверить, сжали ли вы файлы с помощью gzip, просто откройте вкладку сети в консоли разработчика. Если в «Заголовках ответа» вы увидите «Content-Encoding: gzip», то все готово.

Как сжать? Если вы размещаете свое приложение Angular на большинстве облачных платформ или CDN, вам не следует беспокоиться об этой проблеме, поскольку они, вероятно, сделали это за вас. Однако, если у вас есть собственный сервер (например, NodeJS + expressJS), обслуживающий ваше приложение Angular, обязательно проверьте, заархивированы ли файлы. Ниже приведен пример сжатия статических ресурсов в приложении NodeJS + expressJS. Вы не можете себе представить, что это мертвое простое «сжатие» промежуточного программного обеспечения уменьшит размер вашего пакета с 2,21 МБ до 495,13 КБ.

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

Второй подход: проанализируйте свой пакет Angular

Если размер вашего пакета становится слишком большим, вы можете проанализировать его, потому что вы, возможно, использовали неподходящий сторонний пакет большого размера или вы забыли удалить какой-то пакет, если вы его больше не используете. У Webpack есть замечательная функция, которая дает нам визуальное представление о составе пакета webpack.

введите описание изображения здесь

Получить этот график очень просто.

  1. npm install -g webpack-bundle-analyzer
  2. В приложении Angular запустите ng build --stats-json(не используйте флаг --prod). Включив, --stats-jsonвы получите дополнительный файл stats.json
  3. Наконец, запустите, webpack-bundle-analyzer ./dist/stats.jsonи в вашем браузере появится страница по адресу localhost: 8888. Получайте удовольствие от этого.

ссылка 1: Как бюджеты Angular CLI спасли мне день и как они могут сэкономить ваш

ссылка 2: Оптимизировать размер пакета Angular за 4 шага

Масуд Бимар
источник
Куда вы помещаете код сжатия, который вы предоставили в своем приложении angular?
F3L1X79
1
Если вы используете qzip в проекте nodejs, см. Эту ссылку , для проекта angular вы можете просто включить его в команде сборки, см. Эту ссылку
Масуд Бимар
2
Чтобы запустить анализатор без глобальной установки пакета:npx webpack-bundle-analyzer ./dist/stats.json
michel404
4
В Angular 9 команда есть ng build --statsJson=true. См. Документ Angular 9.
wami