如何将小部件webapp框架与SEO友好的CSS和JS文件结合起来

Question

我正在使用Zend框架和自制小部件系统编写webapp.每个小部件都有一个控制器,如果选择,可以选择渲染其中一个视图.这确实有助于我们在网站的任何位置模块化,重新配置和重用小部件.

问题是每个小部件的视图都包含自己的JS和CSS代码,当整个页面放在一起时会导致非常混乱的HTML代码.你到处都有口袋的样式和脚本标签.由于我确定你知道,这对于很多不同的原因是不好的,但它对我们的搜索引擎优化也有深远的影响.

我已经提出了几个解决方案:

1. 将每个小部件的每个视图的CSS和JS分离到它自己的文件中 - 这对于加载时间有很多缺点(需要单独加载更多资源)并且它使编码变得非常困难,因为现在你必须打开3-4个文件只是为了编辑一个小部件.

2. 将所有小部件CSS组合成一个单独的文件(与JS相同) - 当有人进入网站时,也会导致大量负载,混合所有小部件的CSS和JS,因此更难跟踪它们,以及其他我确信你能想到的问题.

3. 创建一个使用方法1(每个小部件单独的CSS和JS)的系统,在交付页面时,将所有CSS和JS拼接在一起.这显然需要更多的处理时间,当然还需要创建这样的系统等.

我的问题是你们对这些解决方案的看法,或者是否有你知道的预先存在的解决方案(或任何可能有帮助的技术)解决这个问题.我非常感谢你的所有想法和评论!!

多谢你们,

阿里

Answer 1

我肯定会选择第三种方法。您可以获得第一种方法中描述的分离灵活性，但您可以获得微调应用程序性能的能力（正如 Pointy 所指出的..）。

您所需要的只是一些中央注册表系统（一个类），您可以使用它来跟踪需要加载的样式表。

Styles::add_sheet('widget_1.css');

此外，您可以向此类添加触发器（方法），以便处理缓存的代码可以跟踪串联样式表是否需要重建。

if (Styles::cache_needs_update()) {
  // rebuild (concatenate) stylesheet and save in cache
}

更进一步，我们还可以按模块或某种其他类型的分组标准连接样式表。当有很多样式表（或 js 文件）时，可以单独缓存这些串联的样式表组。

上面的代码示例将变成类似

Styles::add_sheet('widget_1.css','group_name');

if (Styles::cache_needs_update('group_name')) {
  // rebuild (concatenate) stylesheet for this 'group_name' and save in cache
}