ПОПЕРЕДЖЕННЯ у бюджетах, максимально перевищених за початкові

Коли я будую свій кутовий проект 7 з --prod, у мене є попередження про бюджети.

У мене є кутовий проект 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/isissue/3216
• https://angular.io/guide/build#configure-size-budgets
• Бюджети ефективності (Тримайте кількість запитів низькою і розмір файлів малий)

Що таке кутовий бюджет CLI? Бюджети - одна з менш відомих особливостей Angular CLI. Це досить невелика, але дуже акуратна особливість!

Коли додатки зростають у функціональності, вони також збільшуються в розмірах. Бюджети - це функція у кутовому інтерфейсі CLI, яка дозволяє встановлювати порогові значення бюджету у вашій конфігурації, щоб забезпечити, щоб частини вашої програми перебували в межах встановлених вами меж - Офіційна документація

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

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

Думаючи прагматично, має сенс лише визначати бюджети для нарощування виробництва. Prod build створює пачки з "справжнім розміром" після застосування всіх оптимізацій, таких як струшування дерев та мінімізація коду.

На жаль, помилка побудови! Максимальний розмір пакета було перевищено. Це чудовий сигнал, який говорить нам, що щось пішло не так ...

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

Перший підхід: чи зберігаються ваші файли?

Взагалі кажучи, gzipped файл має лише приблизно 20% розміру вихідного файлу, що може різко скоротити початковий час завантаження вашої програми. Щоб перевірити, чи зберегли ви файли, просто відкрийте вкладку мережі консолі розробника. У розділі "Заголовки відповідей", якщо ви побачите "Кодування вмісту: gzip", вам добре піти.

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

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

Другий підхід :: Проаналізуйте свій кутовий пакет

Якщо розмір пакета стає занадто великим, ви можете проаналізувати пакет, тому що, можливо, ви використовували невідповідний пакет великого розміру сторонніх сторін або ви забули видалити якийсь пакет, якщо його більше не використовуєте. 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. Повеселіться з цим.

ref 1: Як кутові бюджети CLI врятували мій день та як вони можуть врятувати ваш

посилання 2: Оптимізуйте розмір кутового пучка в 4 етапи