Question

如何在运行/运行时缩小JS和CSS，这样我就可以将原始代码结构保留在我的服务器中，如果它在运行时/飞行中缩小。

Answer 1

经过大量搜索和网站优化之后，我真的建议将此脚本用于CSS文件：

<style>
<?php
     $cssFiles = array(
      "style.css",
      "style2.css"
    );

    $buffer = "";
    foreach ($cssFiles as $cssFile) {
      $buffer .= file_get_contents($cssFile);
    }
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(': ', ':', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    echo($buffer);
?>
</style>

它将所有css文件压缩为一个并将其过去为html，从而将额外请求的数量减少到零。如果您愿意，也可以创建自己的compressed.css文件，而不是将样式粘贴到html中。

Answer 2

我认为您的问题实际上应该是：我如何可靠且可重复地更新我的实时服务器？您需要的是一个自动部署脚本。 Personally我更喜欢Fabric，但还有其他工具可用。

自动部署脚本允许您运行单个命令，该命令将转到实时服务器并更新源代码，运行任何部署步骤（例如缩小javascript）并重新启动Web服务器。

你真的不想动态地缩小javascript或css文件，你应该在部署时执行一次，然后在代码中有一个变量来指定这是否是实时部署。如果变量为true，则指向文件的链接应该是指向最小化版本的链接，如果它是假的，那么它们应该是正常版本。

有许多程序执行最小化，尚未提及的程序是JSMin。

Answer 3

如果您的目标是让您的JavaScript略微降低可读性，并在运行时执行此操作，则可以保持非常，非常简单。只需三行代码，您就可以在几毫秒内完成整体缩小。

// make it into one long line
$code = str_replace(array("\n","\r"),'',$code);
// replace all multiple spaces by one space
$code = preg_replace('!\s+!',' ',$code);
// replace some unneeded spaces, modify as needed
$code = str_replace(array(' {',' }','{ ','; '),array('{','}','{',';'),$code);

这不会进行任何语法检查。使用此代码后代码可能无效。检查JS中的行尾，是';'在某个地方失踪了？

Answer 4

HTML5 Boilerplate附带了一个方便的构建脚本，可以压缩JS，CSS，图像等等。看看吧！

正如其他答案中所解释的那样，“真正的”动态缩小（每次请求时动态压缩文件）都不是一个好主意。

Answer 5

如果我可以自由发言;

缩小JS / CSS文件的目标是更快地解析（并且还占用更少的磁盘空间）。通过在运行时缩小它，这种好处将完全丧失。

也许我错了你的最终目标，但这首先是我想到的。

编辑：@Ant的帖子为我澄清了这一点。

Answer 6

Assetic是一个很好的项目，可以帮助组织CSS和Javascript等资源，包括缩小。有关简介，请参阅here。

通常，运行时缩小应始终与服务器端的实体缓存以及客户端和代理缓存在浏览器中的使用相结合。

Answer 7

如果您可以完全控制Apache / Ngnix配置，那么一个很好的选择（通常）就是启用PageSpeed模块，在您的情况下

js-minify过滤器https://developers.google.com/speed/pagespeed/module/filter-js-minify
css-rewrite filter https://developers.google.com/speed/pagespeed/module/filter-css-rewrite

Answer 8

您需要system();此

$ java -jar yuicompressor-x.y.z.jar

http://developer.yahoo.com/yui/compressor/

Answer 9

这正是 WebUtilities （对于J2EE）的作用。这是链接。

http://code.google.com/p/webutilities/

它可以实现缩小和合并。它还具有缓存功能，以避免在未修改资源的情况下重新运行资源的缩小或重新处理。它还有助于进行以下优化。

在一个请求中提供多个JS或CSS文件
为浏览器缓存的JS，CSS和图像文件添加Expires标头
动态缩小JS，CSS文件
缩小内联CSS和JS代码块
为您的回复添加字符编码
服务器压缩内容（gzip / compress / deflate）
通过避免重新处理来缓存对速度加载的响应

如果您觉得有趣，请查看。

Answer 10

我怀疑，如果使用zlib压缩发送JS，这种缩小的狂热确实会产生很大的不同。

首先，空白区域压缩得非常好，因此缩小文件大小的缩小可能只是jQuery等大型库的主要问题（除非您需要黑客版本，否则可能应该从CDN提供）。

Seconfly，JS通常由客户端缓存，所以除非你在不同的页面上使用很多不同的脚本，否则大多数页面加载都不会产生任何影响。

B）当出现问题时，很高兴看到服务器正在服务的实际代码，以防它碰巧与您的工作副本不同。在这方面，缩小的代码表现不佳。

我的个人意见 - zlib即时压缩，是的。缩小 - 仅适用于非常大的文件。

将JS解析为解释器的性能 - 可能是因为浏览器运行在具有32MB RAM的Apple Performa上。我不认为它与大多数脚本产生了真正的世界差异。缓慢的页面通常很慢，因为同时运行的代码效率太低，或者对重载服务器的请求过多。（当你输入每个字母时，你真的需要检查用户名的可用性吗？当我换到另一个字段或者当我点击提交时，你不能检查吗？）

如何动态缩小JS或CSS

10 个答案: