如何动态缩小JS或CSS

How to minify JS and CSS on the fly / runtime, so that I can keep the original code structure in my servers if its minified on the runtime / fly.

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

10 个解决方案

#1

After a lot of searching and sites optimizations i really recommend to use this script for CSS files:

经过大量的搜索和网站优化后，我真的建议将此脚本用于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>

It compress all css files into one and past it into html, reducing the number of additional requests to zero. You can also make your own compressed.css file if you prefer this than pasting styles into html.

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

#2

I think your question should actually be: How can I reliably and repeatably update my live servers? What you need is an automatic deployment script. Personally I prefer Fabric, but there are other tools are available.

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

An automatic deployment script will allow you to run a single command which will go to live servers and update the source code, run any deployment steps (such as minifying javascript) and restart the webserver.

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

You really don't want to be minifying javascript or css files on the fly, you should do that once at deployment and then have a variable in your code that specifies whether this is a live deployment or not. If the variable is true then your links to the files should be links to the minimized version, if it's false then they should be to the normal versions.

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

There are a number of programs which perform minimization, one that hasn't been mentioned yet is JSMin.

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

#3

If your goal is to make your JavaScript slightly less readable, and do this at runtime, you could keep it very, very, simple. With just three lines of code you can get a long way toward total minification within a few milliseconds.

如果您的目标是使您的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);

This does not do any syntax checking whatsoever. Code can become invalid after using this. Check the end of the lines in your JS, is a ';' missing somewhere?

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

#4

HTML5 Boilerplate comes with a handy build script that compresses JS, CSS, images and much more. Check it out!

HTML5 Boilerplate带有一个方便的构建脚本，可以压缩JS，CSS，图像等等。一探究竟！

As explained in the other answers, “real” on-the-fly minification (dynamically compress a file every time it’s requested) wouldn’t be a very good idea.

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

#5

If I may speak so freely;

如果我可以这么*地说话;

Minifying a JS/CSS file would have as goal that it parses more quickly ( and also use up less disk space). By minifying it at runtime, that benefit would be completely lost.

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

Perhaps I am mistaken in your final goal, but this is what comes to my mind at first.

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

Edit: post by @Ant clarified it for me.

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

#6

Assetic is a nice project that helps in organizing resources such as CSS and Javascript including minification. See here for an introduction.

Assetic是一个很好的项目，可以帮助组织CSS和Javascript等资源，包括缩小。请看这里的介绍。

Generally runtime minification should always be combined with solid caching on the server side and the usage of client and proxy caches along the way to the browser.

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

#7

You need to system(); this

你需要system（）;这个

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

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

#8

If you have full control of your Apache / Ngnix configuration, a great option (in general) would be to enable the PageSpeed module, in your case with

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

js-minify filter https://developers.google.com/speed/pagespeed/module/filter-js-minify
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
css-rewrite filter https://developers.google.com/speed/pagespeed/module/filter-css-rewrite

#9

Thats is exactly what WebUtilities (for J2EE) does. Here is the link.

这正是WebUtilities（针对J2EE）所做的。链接在这里。

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

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

It does the minification and merging on the fly. It also has caching to avoid reruning the minification or reprocessing of a resource if resource not modified. It also helps with following optimizations.

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

Serve multiple JS or CSS files in one request
在一个请求中提供多个JS或CSS文件
Add Expires header for JS, CSS and Image files to be cached by browser
为浏览器缓存的JS，CSS和Image文件添加Expires标头
Minify JS, CSS files on the fly
动态缩小JS，CSS文件
Minify Inline CSS and JS code blocks
缩小内联CSS和JS代码块
Add Character Encoding to your response
为您的回复添加字符编码
Server compressed contents (gzip/compress/deflate)
服务器压缩内容（gzip / compress / deflate）
Cache responses to speed loading by avoiding reprocessing
通过避免重新处理来缓存对速度加载的响应

Please have a look in case you find it interesting.

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

#10

-1

I am doubtful that this minification craze really makes that big of a difference if the JS is sent with zlib compression.

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

First, white space compresses extremely well, so the reduced filesize that results from minification is probably only a major issue with large libraries such as jQuery (which probably should be served from a CDN unless you need a hacked version).

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

Seconfly, JS is usually cached by the client so unless you use a lot of different scripts on different pages, most page loads it is not going to make a difference.

简而言之，JS通常由客户端缓存，因此除非您在不同的页面上使用大量不同的脚本，否则大多数页面加载都不会产生任何影响。

The problems with minification and why I do not do it (except with things like jQuery): A) It strips out comments, so unless you re-add them, things like copyright notices are lost. This could result in a license violation, since even many OSS licenses require the copyright be intact.

B) When there is a problem, it is nice to see the actual code the server is serving just in case it happens to be different than your working copy. Minified code does not do well in that respect.

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

My personal opinion - zlib compress on the fly, yes. minify - only for really large files.

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

Performance parsing the JS into the interpreter - maybe if the browser is running on an Apple Performa with 32MB of RAM. I do not buy that it makes a real world difference with most scripts. Pages that are slow are usually slow because of too much inefficient code running at same time or are making too many requests to overloaded servers. (IE do you really need to check availability of username as I type each letter? Can't you check when I change to a different field or when I click submit ??? ;)

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

#1