Javascript 确保组件'；s客户端库文件仅在组件存在时加载到页面上？

我是AEM的新手。目前，我们网站上的每个页面都有一个模板。所有组件都有“project_name.components”类别，我在头文件中调用客户机libs时使用：

<sly data-sly-call="${clientLib.css @ categories='project_name.components'}" />
<sly data-sly-call="${clientLib.js @ categories='project_name.components'}" />

但是，我有一个breadcrumbs组件，它不在每个页面上，但是，正如预期的那样，它的客户机libs文件会显示出来，这会导致现有默认breadcrumbs的样式/脚本出现一些问题

我为新的breadcrumb组件提供了一个测试类别名称“project_name.breadcrumbs”。是否有办法在同一头文件中的某种类型的if/else语句中使用此类别名称，该头文件仅在面包屑被拖到页面上时调用面包屑客户端库文件？

一些想法：

• 最简单的方法是将客户机库作为使用它的组件的一部分包含，而不是将它包含在其他地方。这样做的缺点是，您可能希望在页面的开头部分加载的CSS在正文的某个地方才会出现
• 如果你的CSS样式正在影响它不应该影响的东西，那么CSS样式需要有足够的选择器，这样它就不会破坏它不应该应用的东西。也许您可以向breadcrumbs添加一个类，并使所有样式仅应用于具有该类的标记下的内容。如果您以这种方式更改CSS，当页面不使用面包屑时，它不会对页面产生负面影响（尽管如果将来不会加载和缓存浏览器以供使用，它可能会增加页面占用空间）
• 否则，您可以添加在页面级别运行的逻辑，该逻辑将检查节点并查看包含哪些组件，然后添加条件逻辑以仅在页面使用组件时添加客户端库。但这是更多的后端工作。因此，您可以按照建议添加if/else语句，但其背后的代码由您自己编写——据我所知，没有任何内置语句可以有条件地执行该检查

---

正如您所建议的，我正在考虑在组件html文件中调用它，但这可能不是最佳做法。我对样式有特定的选择器，但正是js文件干扰了页面上的原始面包屑。如果新的面包屑存在，我有一个隐藏默认面包屑的函数，但是我想我只需要重新编写我的函数。