Javascript 基于组件的客户端库AEM

如果这意味着需要对服务器进行更多调用，那么按组件划分ClientLib是否更好

即使用

---

在

.jsp

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

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

在组件级别加载CSS

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

默认情况下，基于组件有条件地加载CSS是不可用的，您必须编写自定义逻辑才能实现这一点。 从邮局

实现这一点的一种方法是拦截这种行为。使用过滤器 并将写入内存中输出缓冲区的所有数据进行缓冲。那你呢 可以安全地渲染所有组件，如果遇到特殊问题 组件，您可以在请求属性中设置标志。过滤器可以 然后检查这些属性，相应地更改缓冲区并 然后把所有的东西都送出去。这种方法有点冒险，因为它 会消耗大量内存。它还会改变页面的呈现性能和行为。但也许值得一试

此外，对于组件级CSS，您必须确保样式 对于一个组件，不要影响另一个组件的样式，即 必须使用窄选择器来执行此操作，并确保您不会 在这个过程中破坏任何其他东西

此外，使用组件级CSS，您必须确保组件的样式不会影响另一个组件的样式，也就是说，您必须使用窄选择器来执行此操作，并确保在此过程中不会破坏任何其他内容

---

其他方法

使用页面组件-如果您有一个具有很多样式的组件，并且您不想让它在其他页面上加载，那么您可以考虑使用页面组件（不同的模板）来实现这一点。每个页面组件都可以根据其使用情况加载一组不同的clientslibs

使用延迟clientlibs-如果您的布局不断变化，并且您担心clientlibs文件有多大，那么延迟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>

…[导航组件逻辑]
[导航组件结束]
…[站点地图组件逻辑]
[站点地图组件结束]
变成…

无论您采取什么方法，都要确保缓存、页面加载时间、维护、性能等都被考虑在内

---

进一步阅读

---

感谢您提供了如此详尽而有益的回答！