Angular 7 есть библиотеки для проверки ленивого дерева производительности загрузки

Question

Я использую отложенную загрузку в своем проекте 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 МБ.

Answer 1

Я думаю, что не так просто определить, какие размеры кусков приемлемы или нет, поскольку это очень сильно зависит от размера и требуемой структуры приложения.

Я думаю, что размерыпредоставленные вами блоки приемлемы, особенно если учесть, что их доставка на клиентскую часть gzipped значительно уменьшит размер созданных файлов.

Сборка для одного из приложений, над которыми я работаюon генерирует следующие чанки

Обратите внимание, что размер основного чанка составляет 1,74 МБ ... Причина в том, что именно это приложение под капотомбыл основан на многих сторонних библиотеках, которые включены в глобальную область (через секцию скриптов angular.json).Это означает, что библиотеки добавляются как есть в основной комплект.

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

• Определите любые библиотеки, которые выне нужно, какие из них добавляются в глобальную область
• Убедитесь, что любые сторонние библиотеки, которые не добавлены в глобальную область видимости, можно использовать в трех вариантах (например, библиотеки, предоставляющие угловой сервис, использующий нотацию provideIn: root)
• Убедитесь, что в этом модуле определены службы, компоненты, директивы и т. Д., Необходимые для одного лениво загруженного модуля.

Внутренний веб-пакет (который используется Angular Cli для объединения вашего приложения).граф зависимостей и разбивает куски, следуя некоторой эвристике.В этой статье объясняются различные способы настройки разделения фрагментов через веб-пакет.

Answer 2

Привет. Существует пакет, который можно найти на npm

https://www.npmjs.com/package/source-map-explorer

при сборке, используя команду ng build --prod --source-map = true

explorer-map explorerпуть к файлу bundle.js, он откроет древовидную структуру в DOM, показывая размер каждой части приложения