9

假设我的页面结构是：

1. one.html :
   includes ->   a.js , b.js , c.js ,d.js

2. two.html :
   includes ->   a.js , b.js,  x.js, y.js, z.js

3. three.html :
   includes ->   a.js , b.js, s.js,  x.js, y.js

等等。有些页面的访问量比其他页面多，比如 3 个页面占网站所有页面浏览量的 99%。

我正在寻找解决方案：

i) 组合并最小化可包含在页面中的组中的文件。

ii) 具有将组的文件名映射到最终组合文件名的一些逻辑。

iii) 包括像 Google Closure 编译器 / YUI 压缩器这样的压缩器。

我看过的一种解决方案是： PHP minify

其中大部分。但是它对我来说有以下缺点：

i) 我将在 CDN 服务器上托管我的静态组合文件，而不是在托管 PHP minify 的同一 Web 服务器上，因此 PHP minify 按组名服务器文件的逻辑对我不起作用。

ii) PHP Minify 使用 PHP CGI 处理和提供脚本，而我希望直接从 CDN 服务器提供我的缩小内容。

PHP Minify 是否有一些函数可以将组名映射到组合文件名，我可以在我的网页中使用这些函数来直接设置组合 JS 文件的 CDN 路径。例如

<?php
  $groupName = array("onePage" => array('a.js','b.js','c.js','d.js');
?>

<script type="text/javascript" src="http://www.MYSTATICSERVER.com/js/<?php getMergedFileName($groupName)"></script>

而不是调用 PHP Minify 的 PHP 脚本来获取一个组的文件，这实际上是一个 PHP 页面调用，然后从先前生成的文件中提供 javascript 内容：

<script type="text/javascript" src="http://www.MYWEBSERVER.com/min/?g=onePage" ></script>

（我同意通过将不同的解决方案与自定义部署脚本和缩小工具（例如 ANT、FABRIC + YUICompressor/ClosureCompiler）相结合来实现其中大部分是可行的，但我正在寻找一个我可能错过的开发良好的可配置解决方案）

4

4 回答 4

3

更新以显示缩小示例

使用 minify 似乎是可行的。我不确定你是否尝试过这个，但是把它放在那里给任何可能需要它的人

1) Minify 可以生成脚本的组合和 gzip 副本并将其用作缓存，这样它就不需要处理所有文件的请求。要启用此功能，只需使用临时目录的位置编辑 config.php 文件

$min_cachePath = 'c:\\xampp\\htdocs\\min\\cache';

2）在groupsConfig.php中添加所有组后，只需向每个组发出请求，以便minify在缓存文件夹中生成输出文件

3) 对于每个组，您会在临时文件夹中找到 2 个文件，名称如下：

minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4
minify_g=group1_08da191ba9c60a0ed611d0de455bb7a4.gz

4）您可以根据需要重命名文件并将它们直接部署到您的CDN

5) 如果您的 CDN 允许 url 重写，您可以重写您的脚本 url 以提供 JS，而无需更改您提供的页面中的位置。

除非您有大量不同的配置，否则我建议您使用 YUICompressor 并部署到您的 CDN 网络。使用简单的 shell 脚本自动执行类似的操作实际上非常简单。然而，如果你有一个非常复杂的设置，你可以考虑使用像grunt这样运行在 node.js 之上的构建工具。我一直在使用 Grunt 为使用相同代码库的不同项目构建 JS 文件，并且效果很好。此外，OOTB 还支持 lint 和压缩。

于 2012-04-30T06:22:23.633 回答
1

我自己的项目和你的很像；带有外部和内部 JavaScript、CSS 和图像的 HTML。我也四处寻找现成的解决方案，但找不到，所以我开发了自己的解决方案。这是我创建的系统的一个破败。如果你要走那条路，我希望这能让你知道要寻找什么。

系统首先检查您希望部署的项目的特定版本。您需要在本地文件系统上的路径与其各自的远程路径（例如 CDN 或 Web 服务器）之间建立转换；就我而言，所有资产都是从项目内的固定目录加载的。

我首先解析所有 HTML 模板（我有一个 MVC 将 HTML 与 PHP 代码分开）；这收集了所有 JavaScript、CSS 和图像引用：

  • HTML、JavaScript 或 CSS 中的图像引用被它们在 CDN 上的位置所取代。
  • 实习 JavaScript 和 CSS 分别使用 Closure Compiler 和 YUI 进行动态压缩。
  • 连续的外部 JavaScript 和 CSS 块被单个压缩代码/样式包所取代；捆绑包名称是文件名及其各自版本的哈希（CDN 将提供具有最长到期日期的文件，因此任何更改都必须导致唯一的文件名）。

然后，所有捆绑包都被压缩、压缩、保存并与任何图像一起上传到 CDN，以准备部署。PNG文件也被“压碎”以减小它们的大小。

最后，整个项目被上传和部署（在多台服务器的情况下）。

结论这是很多工作，但是当它运行时很高兴看到它工作:)

于 2012-05-04T17:03:43.627 回答
0

创建一个分组配置文件（xml/php），其中包含在您拥有的静态 html 中使用的分组规则。

<groupings>
    <group path='grouped_minified_js.js'><!-- multiple groups can be used for grouping js/css files. reuse this group by including the id in multiple views -->
            <resource>PATCH_OF_FILE_TO_BE_GROUPED</resource><!-- multiple file to be grouped -->
            .
            .
            .
        </group> 
        <group path='xyz.css' /> ...<!-- additional grouping rule -->
</groupings>

创建一个读取此配置的 php 脚本，并使用 PHP minify 在组定义中指定的路径创建分组的缩小 js/css 文件。

使用这些路径将分组文件包含到静态 html 文件中。运行脚本以测试您的页面并将分组文件部署到 CDN。

于 2012-05-03T15:45:35.433 回答
0

咕噜声很棒。如果这不起作用，请尝试磁带： http: //getcassette.com/

于 2012-05-03T20:54:19.967 回答