Когда я собираю свой проект 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
build
production
ng-build
Масуд Бимар
источник
источник
Ответы:
Откройте файл angular.json и найдите
budgets
ключевое слово.Должно получиться так:
Как вы, наверное, догадались, вы можете увеличить
maximumWarning
значение, чтобы предотвратить это предупреждение, то есть:Что означают бюджеты ?
В нашем случае бюджет - это предел размеров пакетов.
Смотрите также:
источник
@angular/cli@7
Смотрите также, что нового в ng7, здесь blog.angular.io/…With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI.
Что такое Angular CLI Budgets? Бюджеты - одна из менее известных функций Angular CLI. Это довольно маленькая, но очень интересная функция!
По мере роста функциональности приложений они также увеличиваются в размерах. Бюджеты - это функция в Angular CLI, которая позволяет вам устанавливать пороговые значения бюджета в вашей конфигурации, чтобы гарантировать, что части вашего приложения остаются в установленных вами границах - Официальная документация
Или, другими словами, мы можем описать наше приложение Angular как набор скомпилированных файлов JavaScript, называемых пакетами, которые создаются в процессе сборки. Угловые бюджеты позволяют нам настраивать ожидаемые размеры этих пакетов. Более того, мы можем настроить пороги для условий, когда мы хотим получить предупреждение или даже не выполнить сборку с ошибкой, если размер пакета выходит из-под контроля!
Как определить бюджет? Угловые бюджеты определены в файле angular.json. Бюджеты определяются для каждого проекта, что имеет смысл, поскольку у каждого приложения в рабочей области разные потребности.
С прагматической точки зрения имеет смысл только определять бюджеты для производственных сборок. Сборка Prod создает пакеты с «истинным размером» после применения всех оптимизаций, таких как «встряхивание дерева» и минимизация кода.
Ой, ошибка сборки! Превышен максимальный размер пакета. Это отличный сигнал, который говорит нам, что что-то пошло не так ...
Первый подход: сжаты ли ваши файлы в сжатом виде?
Вообще говоря, размер gzip-файла составляет лишь около 20% от размера исходного файла, что может значительно сократить время начальной загрузки вашего приложения. Чтобы проверить, сжали ли вы файлы с помощью gzip, просто откройте вкладку сети в консоли разработчика. Если в «Заголовках ответа» вы увидите «Content-Encoding: gzip», то все готово.
Как сжать? Если вы размещаете свое приложение Angular на большинстве облачных платформ или CDN, вам не следует беспокоиться об этой проблеме, поскольку они, вероятно, сделали это за вас. Однако, если у вас есть собственный сервер (например, NodeJS + expressJS), обслуживающий ваше приложение Angular, обязательно проверьте, заархивированы ли файлы. Ниже приведен пример сжатия статических ресурсов в приложении NodeJS + expressJS. Вы не можете себе представить, что это мертвое простое «сжатие» промежуточного программного обеспечения уменьшит размер вашего пакета с 2,21 МБ до 495,13 КБ.
Второй подход: проанализируйте свой пакет Angular
Если размер вашего пакета становится слишком большим, вы можете проанализировать его, потому что вы, возможно, использовали неподходящий сторонний пакет большого размера или вы забыли удалить какой-то пакет, если вы его больше не используете. У Webpack есть замечательная функция, которая дает нам визуальное представление о составе пакета webpack.
Получить этот график очень просто.
npm install -g webpack-bundle-analyzer
ng build --stats-json
(не используйте флаг--prod
). Включив,--stats-json
вы получите дополнительный файл stats.jsonwebpack-bundle-analyzer ./dist/stats.json
и в вашем браузере появится страница по адресу localhost: 8888. Получайте удовольствие от этого.ссылка 1: Как бюджеты Angular CLI спасли мне день и как они могут сэкономить ваш
ссылка 2: Оптимизировать размер пакета Angular за 4 шага
источник
npx webpack-bundle-analyzer ./dist/stats.json
ng build --statsJson=true
. См. Документ Angular 9.