检查页面中是否包含组件

Question

我在aem项目中有几个组件，即使这些组件是否包含在特定页面中，它们也都将被加载。结果，所有的javascript都在运行，我想避免这种情况。 Javascript中是否有办法查看页面中是否包含特定组件？

P.S：我在window中看到了一些AEM CQ全局对象，所以我想也许这些对象之一可能包含所包含的组件。但是我没有看到任何相关的东西，或者也许我在找错地方。

Answer 1

通常在发布者上，不会加载AEM CQ全局对象，至少不会处理可编辑对象。您只需检查该组件添加的DOM元素是否存在。

将组件添加到布局容器时，AEM会将组件名称添加为类。您可以依赖这些自动生成的类。

if($('.myComponent').length < 1){
    return;
}

如果您的目标是不加载JS本身，则可以在组件级别包括clientlib。使用HTTP2时，要加载的文件数量无关紧要，但是OOTB clientlib的include标签仍将添加渲染阻止脚本。有一些解决方法，您可以在其中收集所有要加载到请求属性中的客户端库，然后将其包含在主体关闭标签之前。结帐https://github.com/nateyolles/aem-clientlib-async，了解如何使用HTMLLibraryManager构建自己的自定义clientlib机制。