січень 12, 2018 · angular angular-cli

Аналіз і оптимізація бандлу в Angular 5

Якщо у вас середній або великий проект, а також багато сторонніх компонентів, то розміри підсумкового бандла можуть створювати проблеми.

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

Як зрозуміти які компоненти скільки займають місця, як скоротити розмір бандла і поліпшити швидкість завантаження?

Збір статистики

Щоб проаналізувати бандл необхідно запустити білд Angular CLI зі спеціальним прапором --stats-json:

ng build --stats-json

Якщо встановити прапор --prod, то статистика за окремими компонентами самого програми не буде зібрана, тільки загальний розмір і деталізація node_modules.

Білд зі збором статистики споживає більше ресурсів і ви можете отримати помилку про нестачу оперативної пам’яті. У такому випадку можна скористатися розширеної командою:

node --max-old-space-size=4096 node_modules/@angular/cli/bin/ng build --stats-json

Візуалізація

Разом з кодом проекту буде згенеровано файл stats.json. Це файл статистики webpack і його можна переглядати декількома утилітами (webpack-bundle-analyzer, https://webpack.github.io/analyse/, Webpack Visualizer и другими).

Я віддаю перевагу webpack-bundle-analyzer.

Встановлюємо у глобальний скоуп:

npm i webpack-bundle-analyzer -g

І запускаємо:

webpack-bundle-analyzer dist/stats.json

На стандартному браузері відкриється вкладка такого виду:

analyze-1

Це приклад статистики з реального проекту.

Якщо браузер не відкрився, перейдіть за адресою http://127.0.0.1:8888/

Скорочуємо бандл

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

Подивимося на попередній приклад: node_modules займає найбільше місця, а деякі пакети насправді не дуже-то і потрібні проекту.

На жаль, деякі з них підключені не в самому додатку, а в сторонніх пакетах. І це ускладнює завдання, т.к потрібно шукати заміну або писати компоненти самому. Так що будьте уважні, маленька ліба може затягнути з собою весь lodash або іншого монстра.

import 'rxjs/add' / lettable operators

Чистий проект після ng new виглядає так (зверніть увагу скільки місця займає rxjs):

analyze-3

І що буде, якщо підключити всю лібу import 'rxjs':

analyze-4

У підсумкових значеннях 89KB проти 967KB (без gzip). Так роблять часто і це зручно, шкода цим грішать і творці сторонніх ліб.

До RxJS 5.5 альтернативою повного підключення був rxjs / add ... синтаксис, тепер же це lettable operators.

Lazy-модулі

Якщо з node_modules ми можемо щось викинути, то з кодом програми так не вийде. І тут на виручку приходить поділ аппи на lazy-модулі. Основний сенс в тому, щоб завантажувати тільки ті частини програми, з якими працює користувач.

З Angular CLI це зробити дійсно легко: https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html


Рекомендую до вивчення:

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket