Angular 7 есть библиотеки для проверки дерева производительности ленивой загрузки
Я использую ленивую загрузку в моем проекте angular 7, и когда я запускаю следующее:
npm build --prod --aot
Получил следующее:
chunk {0} common.0913107449ce910bce3f.js (common) 8.58 kB [rendered]
chunk {1} 1.c6d0e41cf66977823213.js () 14 kB [rendered]
chunk {2} 2.e89188e71cd964268db5.js () 407 kB [rendered]
chunk {3} 3.33139e095dcdc99938cc.js () 62.4 kB [rendered]
chunk {4} 4.ebda0bbcf86bc49de010.js () 408 kB [rendered]
chunk {5} 5.2aad2eeebadc8b4b5cd2.js () 479 kB [rendered]
chunk {6} 6.03f5238fe37cf4a30218.js () 18.3 kB [rendered]
chunk {7} runtime.f6427d1efd0aebd99cd7.js (runtime) 2.56 kB [entry] [rendered]
chunk {8} 8.c81220186a7896b40e98.js () 201 kB [rendered]
chunk {9} 9.cf6ecff537fab1ea2da1.js () 120 kB [rendered]
chunk {10} main.5d49d1e040bce48af816.js (main) 950 kB [initial] [rendered]
chunk {11} polyfills.4e6addda4bdac3fbf7e1.js (polyfills) 58.2 kB [initial] [rendered]
chunk {12} styles.0ace7b519537cad1d56a.css (styles) 218 kB [initial] [rendered]
chunk {13} 13.3b05a7908f130641937a.js () 163 kB [rendered]
chunk {14} 14.cb38771e3a2dc30be680.js () 7.57 kB [rendered]
chunk {15} 15.b85622d4429edf650325.js () 4.47 kB [rendered]
chunk {16} 16.c9f6d17f9cb455e6782a.js () 3.64 kB [rendered]
chunk {17} 17.7c0893ad5dc1b053e206.js () 3.94 kB [rendered]
chunk {18} 18.2656773c2af908bb7c14.js () 227 kB [rendered]
chunk {19} 19.d29460e5effdc355660c.js () 215 kB [rendered]
Все мы знаем концепцию отложенной загрузки. Но являются ли эти размеры чанков нормальными? Или надо что-то сделать для изменения структуры с помощью библиотек?
Обратите внимание, что размер созданной папки dist составляет около 13 МБ.
Ответы 2
Привет, есть пакет, который можно найти на npm
https://www.npmjs.com/package/source-map-explorer
при создании сборки используйте команду ng build --prod --source-map = true
Путь проводника исходной карты к файлу bundle.js, он откроет древовидную структуру в DOM, показывающую размер каждой части приложения
Да, они в порядке, используйте source-map-explorer, чтобы найти то, что занимает максимальное пространство
Я думаю, что не так просто определить руководящие принципы того, какие размеры блоков являются приемлемыми или нет, поскольку это очень сильно зависит от размера и требуемой структуры приложения.
Я думаю, что размеры предоставленных вами фрагментов являются приемлемыми, особенно если учесть, что доставка их на клиентскую сторону с помощью gzip-архива значительно уменьшит размер сгенерированных файлов.
Сборка одного из приложений, над которыми я работаю, сгенерировала следующие блоки
Обратите внимание, как общий размер блока составляет 1,74 МБ ... Причина в том, что это конкретное приложение под капотом было основано на многих сторонних библиотеках, которые включены в глобальную область (через раздел сценариев angular.json). Это означает, что библиотеки добавляются в основной комплект без изменений.
Если вы хотите попробовать уменьшить размер ваших чанков, попробуйте следующее
- Определите все библиотеки, которые вам не нужны, которые добавляются в глобальную область видимости.
- Убедитесь, что любые сторонние библиотеки, которые не добавлены в глобальную область видимости, могут быть встряхиваемыми (примеры библиотек, предоставляющих сервис angular, который использует нотацию
provideIn: root) - Убедитесь, что в этом модуле определены службы, компоненты, директивы и т. д., Необходимые для одного модуля с отложенной загрузкой.
Внутренне webpack (который используется Angular Cli для объединения вашего приложения) строит граф зависимостей и разбивает куски, следуя некоторой эвристике. Этот статья объясняет различные способы настройки разделения фрагментов с помощью webpack.
Что вы думаете о размерах чанков?