如果这意味着对服务器的更多调用，那么按组件拆分客户端库会更好吗？
即使用
<%@taglib prefix="ui" uri="http://www.adobe.com/taglibs/granite/ui/1.0" %>
<ui:includeClientLib categories="mqd.component.accordion" />
而<component>.jsp不是在单个样式表中编译所有 CSS。
问问题
2415 次
1 回答
1
据我所知，这更多是基于您的用例的决定，没有一种方法适合所有场景 -
在组件级别加载 CSS
当您在组件级别加载 CSS 时，当页面呈现过程开始时，它在 HEAD 部分中不可用。它只会在你的组件 CSS 在 body 标签的某个地方遇到它时渲染它。
默认情况下，基于组件的有条件加载 CSS 不可用，您必须编写自定义逻辑来实现这一点。从这个帖子，
实现此目的的一种方法是拦截该行为。使用过滤器并缓冲所有写入内存中输出缓冲区的数据。然后你可以安全地渲染所有组件，如果你遇到你的特殊组件，你可以在请求属性中设置一个标志。然后过滤器可以检查这些属性，相应地更改缓冲区，然后将所有内容发送出去。这种方法有点冒险，因为它 会消耗大量内存。它会改变页面的渲染性能和行为。但这可能值得一试。
此外，对于组件级 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>
无论您采用哪种方法，都要考虑缓存、页面加载时间、维护、性能等。
进一步阅读
于 2018-11-13T00:38:01.043 回答