如何在运行中缩小JS或CSS

Question

如何在运行时/运行时缩小JS和CSS，以便在运行时/运行时缩小运行时缩放的原始代码结构。

Answer 1

您需要system();这个

$ Java的罐子的YUICompressor-x.y.z.jar

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

Answer 2

如果我可以这样畅所欲言;

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

也许我错了你的最终目标，但这是我一开始想到的。

编辑：@Ant的帖子为我澄清了它。

Answer 3

HTML5 Boilerplate附带一个方便的构建脚本，压缩JS，CSS，图像和更多。一探究竟！

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

Answer 4

Assetic是一个不错的项目，有助于组织资源，如CSS和Javascript，包括缩小。有关介绍，请参阅here。

通常，运行时缩减应始终与服务器端的固定缓存以及沿浏览器方式使用客户端和代理缓存相结合。

Answer 5

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

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

您真的不想在JavaScript中缩小JavaScript或css文件，您应该在部署时执行一次操作，然后在您的代码中指定是否实时部署该变量。如果变量为真，那么你的文件链接应该是最小化版本的链接，如果它是假的，那么它们应该是正常版本。

有一些执行最小化的程序，一个还没有提到的程序是JSMin。

Answer 6

这就是WebUtilities（用于J2EE）。链接在这里。

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

它确实在缩小和合并的飞行。如果资源没有被修改，它也有缓存来避免重新运行缩小或重新处理资源。它也有助于以下优化。

• 即成多个JS或CSS文件中一个请求
• 添加Expires头的JS，CSS和图像文件可以被浏览器缓存
• 缩减大小JS，在飞行
• 缩减大小内联CSS CSS文件和JS代码块
• 添加字符编码你的回应
• 服务器压缩内容（的gzip /压缩/放气）
• 缓存响应速度加载通过避免再加工

请看看，如果你觉得它有趣。

Answer 7

我怀疑这种缩小热潮如果JS与zlib压缩一起发送，真的会造成巨大的差异。

首先，白色空间压缩得非常好，所以由缩小产生的简化文件大小可能只是诸如jQuery之类的大型库的一个主要问题（可能应该从CDN提供，除非您需要黑客版本）。

通常，JS通常由客户端缓存，所以除非在不同页面上使用很多不同的脚本，否则大多数页面加载都不会有所作为。

缩小问题和为什么我不这样做（除了像jQuery这样的东西）： A）它会去掉注释，所以除非你重新添加它们，否则像版权声明这样的东西就会丢失。这可能导致许可证违规，因为即使许多OSS许可证要求版权保持完整。

B）当出现问题时，很高兴看到服务器的实际代码，以防万一它发生与您的工作副本不同的情况。小代码在这方面做得不好。

我的个人意见 - zlib可以即时压缩，是的。 minify - 仅适用于真正的大文件。

解析JS到解释器的性能 - 也许如果浏览器运行在具有32MB RAM的Apple Performa上。我不买它，它与大多数剧本产生真正的世界性差异。速度慢的页面通常很慢，因为同时运行的代码太多，效率低下，或者对超载服务器发出太多请求。 （IE你真的需要检查用户名的可用性，因为我输入每个字母？你不能检查当我改变到不同的领域或当我点击提交???;）

Answer 8

如果你完全控制你的阿帕奇/ Ngnix配置，一个很好的选择（一般）将启用PageSpeed模块，你的情况与

• JS-缩小过滤https://developers.google.com/speed/pagespeed/module/filter-js-minify
• CSS重写过滤https://developers.google.com/speed/pagespeed/module/filter-css-rewrite

Answer 9

如果你的目标是让你的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 10

很多搜​​索和网站优化后，我真的建议使用这个脚本的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中。