如果这意味着对服务器的更多调用，那么按组件拆分客户端库是否更好？
即使用
<%@taglib prefix="ui" uri="http://www.adobe.com/taglibs/granite/ui/1.0" %>
<ui:includeClientLib categories="mqd.component.accordion" />
在<component>.jsp 中，而不是在单个样式表中编译所有 CSS。
【问题讨论】：
标签： javascript css performance aem client-library
据我所知，这更多是基于您的用例的决定，没有一种方法适合所有场景 -
在组件级别加载 CSS
当您在组件级别加载 CSS 时，当页面呈现过程开始时，它在 HEAD 部分中不可用。它只会在你的组件 CSS 在 body 标签的某处遇到它时渲染它。
默认情况下，基于组件的条件加载 CSS 不可用，您必须编写自定义逻辑来实现这一点。 来自this的帖子，
实现此目的的一种方法是拦截该行为。使用过滤器 并在内存中缓冲所有写入输出缓冲区的数据。那么你 可以安全地渲染所有组件，如果你遇到你的特殊 组件你可以在请求属性中设置一个标志。过滤器可以 然后检查这些属性，相应地更改缓冲区并 然后将所有内容发送出去。这种方法有点冒险，因为它 可以消耗大量内存。它会改变页面的渲染性能和行为。但这可能值得一试。
此外，对于组件级 CSS，您必须确保样式 对于一个组件不影响另一个组件的样式，即你 必须使用窄选择器来执行此操作并确保您不 在这个过程中破坏其他任何东西。
此外，对于组件级 CSS，您必须确保一个组件的样式不会影响另一个组件的样式，即您必须使用窄选择器来执行此操作并确保您不会破坏其他任何内容过程。
其他方法
使用页面组件 - 如果你有一个有很多样式的组件并且你不希望它被加载到其他每个页面上，你可以看看使用页面组件（不同的模板） 为达到这个。每个页面组件都可以根据其用途加载一组不同的客户端库。
使用延迟的客户端库 - 如果您的布局不断变化并且您担心您的客户端库文件已经变得有多大，那么延迟的客户端库可能是一个更好的选择。下面列出的链接中的示例 -
… [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>
无论您采取何种方法，请确保考虑到缓存、页面加载时间、维护、性能等。
进一步阅读
【讨论】：