Из того, что я знаю, это скорее решение, основанное на вашем решении, нет единого подхода, который бы подходил для всех сценариев -
Загрузка CSS на уровне компонентов
Когда вы загружаете CSS на уровне компонентов, он не доступен в разделе HEAD, когда начинается процесс рендеринга страницы.Он будет отображать ваш компонент CSS только тогда, когда он встретит его где-нибудь в теге body.
Условная загрузка CSS на основе компонента по умолчанию недоступна, вам придется написать собственную логику для достижения этой цели.Начиная с этой записи,
Один из способов добиться этого - перехватить это поведение.Используйте фильтр и буферизируйте все данные, записанные в выходной буфер в памяти.Затем вы можете безопасно отобразить все компоненты, и если вы встретите свой специальный компонент, вы можете установить флаг в атрибутах запроса.Затем фильтр может проверить эти атрибуты, соответственно изменить буфер и затем отправить все.Такой подход немного рискован, потому что может потреблять много памяти.И это меняет производительность рендеринга и поведение вашей страницы.Но, возможно, стоит попробовать.
Кроме того, при использовании CSS уровня компонента вам нужно будет убедиться, что стили для компонента не влияют на стили для другого компонента, то есть вам придется использовать узкие селекторы, чтобы сделатьэто и гарантирует, что вы больше ничего не нарушите в процессе.
Кроме того, с CSS уровня компонента, вы должны убедиться, что стили для компонента не влияют на стили для другого компонента, т.е.вам придется использовать узкие селекторы, чтобы сделать это, и убедиться, что вы больше ничего не сломаете в процессе.
Другие подходы
ИспользованиеКомпоненты страницы - Если у вас есть компонент, который имеет много стилей, и вы не хотите, чтобы он загружался на каждую другую страницу, вы можете использовать компоненты страницы (различные шаблоны) для достижения этой цели.Каждый компонент страницы может загружать различную группу клиентских библиотек в зависимости от его использования.
Использование отложенных клиентских библиотек - Если ваш макет постоянно изменяется, и вы беспокоитесь о том, насколько большим стал ваш файл clientlibs,Отложенные клиентские библиотеки могут быть лучшим вариантом.Пример по ссылке, указанной ниже -
… [Navigation component logic]
<ici:js-defer>
<cq:includeClientLib js=”icidigital.components.navigation”/>
</ici:js-defer>
[Navigation component end]
… [Sitemap component logic]
<ici:js-defer>
<cq:includeClientLib js=”icidigital.components.siteMap”/>
</ici:js-defer>
[Sitemap component end]
becomes…
<div class=”footer” />
<script type=”text/javascript” src=”path/to/programmatically/combined/deferred/clientlib.js”></script>
</div>
Какой бы подход вы ни использовали, убедитесь, что учитывается кэширование, время загрузки страницы, обслуживание, производительность и т. Д.
Подробнее читайте
Лучшие подходы к клиентским библиотекам в AEM
Лучшие практики CSS в клиентских библиотеках