基于组件的客户端库 AEM
Component based clientlibs AEM
如果意味着对服务器的更多调用，是否按组件拆分 clientlibs 更好？
即使用
<%@taglib prefix="ui" uri="http://www.adobe.com/taglibs/granite/ui/1.0" %>
<ui:includeClientLib categories="mqd.component.accordion" />
在 <component>.jsp 中而不是在单个样式表中编译所有 CSS。
据我所知，这更多是基于您的用例的决定，没有一种方法适合所有场景 -
正在组件级别加载CSS
当您在组件级别加载 CSS 时，当页面呈现过程开始时，它在 HEAD 部分不可用。它只会在 body 标签中的某处遇到你的组件时呈现它 CSS。
默认情况下，基于组件的条件加载 CSS 不可用，您必须编写自定义逻辑来实现此目的。
来自 this post,
One way to achieve this is to intercept that behaviour. Use a filter
and buffer all data written to the output buffer in memory. Then you
can render safely all components and if you encounter your special
component you can set a flag in the request attributes. The filter can
then check for these attributes, change the buffer accordingly and
then send everything out. That approach is a bit risky, because it
can consume a lot of memory. And it changes the rendering performance and behaviour of your page. But it might be worth a try.
Also, with component level CSS, you would have to ensure the styles
for a component don't affect styles for another component, i.e. you
would have to use narrow selectors to do this and ensure you don't
break anything else in the process.
此外，对于组件级别 CSS，您必须确保一个组件的样式不会影响另一个组件的样式，即您必须使用窄选择器来执行此操作并确保您不'破坏过程中的任何其他内容。
其他方法
使用页面组件 - 如果你有一个有很多样式的组件并且你不希望它在其他页面上加载，你可以看看使用页面组件（不同的模板）来实现这一点。每个页面组件都可以根据其用途加载不同的 clientslib 组。
使用延迟的 clientlibs - 如果您的布局不断变化并且您担心 clientlibs 文件变得太大，那么延迟的 clientlibs 可能是更好的选择。下面列出的 link 中的示例 -
… [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>
无论您采用何种方法，请确保将缓存、页面加载时间、维护、性能等考虑在内。
进一步阅读
如果意味着对服务器的更多调用，是否按组件拆分 clientlibs 更好？
即使用
<%@taglib prefix="ui" uri="http://www.adobe.com/taglibs/granite/ui/1.0" %>
<ui:includeClientLib categories="mqd.component.accordion" />
在 <component>.jsp 中而不是在单个样式表中编译所有 CSS。
据我所知，这更多是基于您的用例的决定，没有一种方法适合所有场景 -
正在组件级别加载CSS
当您在组件级别加载 CSS 时，当页面呈现过程开始时，它在 HEAD 部分不可用。它只会在 body 标签中的某处遇到你的组件时呈现它 CSS。
默认情况下，基于组件的条件加载 CSS 不可用，您必须编写自定义逻辑来实现此目的。 来自 this post,
One way to achieve this is to intercept that behaviour. Use a filter and buffer all data written to the output buffer in memory. Then you can render safely all components and if you encounter your special component you can set a flag in the request attributes. The filter can then check for these attributes, change the buffer accordingly and then send everything out. That approach is a bit risky, because it can consume a lot of memory. And it changes the rendering performance and behaviour of your page. But it might be worth a try.
Also, with component level CSS, you would have to ensure the styles for a component don't affect styles for another component, i.e. you would have to use narrow selectors to do this and ensure you don't break anything else in the process.
此外，对于组件级别 CSS，您必须确保一个组件的样式不会影响另一个组件的样式，即您必须使用窄选择器来执行此操作并确保您不'破坏过程中的任何其他内容。
其他方法
使用页面组件 - 如果你有一个有很多样式的组件并且你不希望它在其他页面上加载，你可以看看使用页面组件（不同的模板）来实现这一点。每个页面组件都可以根据其用途加载不同的 clientslib 组。
使用延迟的 clientlibs - 如果您的布局不断变化并且您担心 clientlibs 文件变得太大，那么延迟的 clientlibs 可能是更好的选择。下面列出的 link 中的示例 -
… [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>
无论您采用何种方法，请确保将缓存、页面加载时间、维护、性能等考虑在内。
进一步阅读