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

Когда я собираю свой проект 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]

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

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

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

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

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

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

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

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

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

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

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Бюджеты производительности (сохраняйте низкое количество запросов и небольшие размеры файлов)

Что такое 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 шага