Как проверить размер загруженного CSS в Angular Application

Question

Надеюсь, у вас все хорошо.

Я использую SCSS и Bootstrap в своем приложении Angular и, как мы знаем, после запуска приложения Angular оно преобразует эти файлы SCSS в его CSS-версию.

Как я могу проверить размер файла CSS, сгенерированного в целом для приложения, так как мне нужно показать некоторые отчеты для задач оптимизации.

Любая идея.Я попробовал поискать в Google и здесь, на Stack Overflow, но не смог найти нужного решения.Я даже не вижу ни одного CSS-файла на вкладках Network в Браузерах.

Есть предложения?

Answer 1

Предполагается, что вы используете Angular CLI для своего проекта, который внутренне использует веб-пакет ...

Как только вы соберете проект.Каталог dist создается в корневом каталоге проекта.Посмотрите на него, и вы найдете все пакеты .js и .css, которые он мог сгенерировать.

Примечание. Размер зависит от типа сборки.Для производственной сборки размеры будут минимальными, для других типов сборок, если таковые имеются, размеры могут отличаться.

Answer 2

Я не нашел ни одного css, сгенерированного в сети, как ответ выше, но я сделал трюк.

Я пошел в папку webpack и там нашел один сгенерированный CSS.(Искал через произвольный CSS Selecto).

Я щелкнул правой кнопкой мыши и сохранил его на рабочем столе.Если вы проверите свойства этого CSS-файла, он показывает размер в килобайтах.

Answer 3

Сначала перейдите на вкладку Сети, затем перезагрузите страницу.Как только вы перезагрузите его, нажмите на фильтр CSS, и вы увидите весь список CSS, включенный в ваше приложение, с размером файла.