DEV.NVX.ME

Angular & TypeScript

Анализ и оптимизация бандла Angular 5 приложения

| версия Angular: 5
ng5-stats-json.jpg

Если у вас средний или большой проект, а также много сторонних компонентов, то размеры итогового бандла могут создавать проблемы.

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

Как понять какие компоненты сколько занимают места, как сократить размер бандла и улучшить скорость загрузки?

Сбор статистики

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

1
ng build --stats-json

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

Билд со сбором статистики потребляет больше ресурсов и вы можете получить ошибку о недостатке оперативной памяти. В таком случае можно воспользоваться расширенной командой:

1
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.

Устанавливаем в глобальный скоуп:

1
npm i webpack-bundle-analyzer -g

И запускаем:

1
webpack-bundle-analyzer dist/stats.json

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

analyze-1.png

Это статистика из реального проекта.

Если браузер не открылся, перейдите по адресу http://127.0.0.1:8888/

Сокращаем бандл

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

Посмотрим на предыдущий пример: node_modules занимает больше всего места, а некоторые пакеты на самом деле не очень-то и нужны проекту.

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

import 'rxjs/add' / lettable operators

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

analyze-3.png

И что будет, если подключить всю либу import 'rxjs':

analyze-4.png

В итоговых значениях 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


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


Задавайте вопросы или делитесь своими идеями в комментариях.

Также подписывайтесь на мой twitter и спасибо за внимание!

Proudly powered by Hexo and Theme by Hacker
© 2018 Sasha Novik