Question

如果这意味着对服务器的更多调用，是否最好按组件拆分clientlib？

即使用

<%@taglib prefix="ui" uri="http://www.adobe.com/taglibs/granite/ui/1.0" %> <ui:includeClientLib categories="mqd.component.accordion" />

在<component>.jsp中

而不是在一个样式表中编译所有CSS。

Answer 1

据我所知，这更多是基于您的用例的决定，没有一种适合所有情况的方法-

在组件级别加载CSS

在组件级别加载CSS时，在页面呈现过程开始时，HEAD部分中将不可用CSS。只有在body标签中某个地方遇到组件CSS时，它才会呈现。

默认情况下，基于组件的条件加载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>

无论采用哪种方法，都要确保将缓存，页面加载时间，维护，性能等考虑在内。

进一步阅读

Best approaches to clientlibs in AEM

CSS best practices in clientlibs

基于组件的客户端库AEM

1 个答案: