减少 Javascript 和 CSS 文件大小的最佳方法是什么？
当处理大型和/或许多 Javascript 和 CSS 文件时，减小文件大小的最佳方法是什么？
When working with large and/or many Javascript and CSS files, what's the best way to reduce the file sizes?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（18）
对于 javascript，我使用 Dean Edwards 的 Javascript Packer。 它已被移植到.NET、perl、php4、php5、WSH，甚至还有一个 aptana 插件。
Javascript 打包有几种风格 - 有些只是删除注释和空格，有些会更改变量名称以使其简洁，还有一些，好吧，我什至不知道它们是做什么的，但输出肯定很小。 高端压缩通过使用 eval() 函数来工作，这会给客户端带来一些额外的负担，因此如果您的脚本特别复杂，或者您正在针对较慢的硬件进行设计，请记住这一点。 Javascript 加壳器为您提供了要使用的压缩级别的选项。
对于CSS，你能做的最好的事情就是去掉空格和注释。 值得庆幸的是，这意味着您可以通过一行函数来实现这一目标：
虽然该函数和 Javascript 打包程序将减少单个文件的文件大小，但为了从您的网站获得最佳性能，您还需要减少文件数量您发出的 HTTP 请求的数量。 每个 Javascript 和 CSS 文件都是一个单独的请求，因此将它们合并到一个文件中将获得最佳结果。 您可以使用我在博客上编写的程序/技术（无耻的自我插件），而不是尝试维护单个 bohemoth JS 文件，网址为 http://spadgos.com/?p=32
该程序基本上读取一个“构建脚本”类型的文件，该文件将同时将多个 Javascript 和 CSS 文件组合并压缩为一个（每个文件）为您（或更多，如果您愿意）。 有多个选项可用于输出和显示所有文件。 那里有一篇更大的文章，并且源代码是免费提供的。
For javascript, I use Dean Edwards's Javascript Packer. It's been ported to .NET, perl, php4, php5, WSH, and there's even an aptana plugin.
Javascript packing comes in a few flavours - some just strip out comments and whitespace, others will change your variable names to be concise, and others, well, I don't even know what they do, but the output sure is small. The high-end compression works by using the eval() function, which puts some extra burden on the client, so if your scripts are particularly complicated, or you're designing for slower hardware, keep that in mind. the Javascript packer gives you the option for which compression level you want to use.
For CSS, the best you can do is strip whitespace and comments. Thankfully that means that you can achieve that with a one-line function:
While that function and the Javascript packer will reduce the file size of individual files, to get the best performance from your site, you'll also want to be reducing the number of HTTP requests you make. Each Javascript and CSS file is a separate request, so combining them into one file each will the the optimal result. Instead of trying to maintain a single bohemoth JS file, you can use the program/technique I've written on my blog (shameless self plug) at http://spadgos.com/?p=32
The program basically reads a "build script"-type file which will simultaneously combine and compress multiple Javascript and CSS files into one (of each) for you (or more, if you want). There are several options for the output and display of all files. There's a larger write-up there, and the source is freely available.
Shrinksafe 可能会有所帮助：http://shrinksafe.dojotoolkit.org/ 我们正在使用它，它可以起到以下作用：干得不错。 我们在打包 Web 应用程序时从 ant 构建中执行它。
Shrinksafe may help: http://shrinksafe.dojotoolkit.org/ We're using it and it does a pretty good job. We execute it from an ant build for when packaging our web app.
帮助 YUI 压缩器 提供了一些关于如何使用的好建议您可以调整脚本以实现更好的节省。
Helping the YUI Compressor gives some good advice on how you can tweak your scripts to achieve even better savings.
Google 托管了一些预压缩的 JavaScript 库文件，您可以将它们添加到您自己的网站中。 Google 不仅为此提供带宽，而且根据大多数浏览器的文件缓存算法，如果用户已经从 Google 下载了其他网站的文件，他们就不必再为您的网站下载文件。 对于一些超过 90k 的 JS 库来说这是一个不错的小奖励。
Google hosts a handful of pre-compressed JavaScript library files that you can include in your own site. Not only does Google provide the bandwidth for this, but based on most browser's file caching algorithms, if the user has already downloaded the file from Google for another site they won't have to do it again for yours. A nice little bonus for some of the 90k+ JS libraries out there.
请参阅问题：最佳 javascript 压缩器
根据您是否要 gzip，您的 JavaScript 文件可能会发生变化您选择的压缩机。 （如果您还打算使用 gzip，目前 Packer 不是最佳选择，但请参阅上述问题以获取当前最佳答案）
See the question: Best javascript compressor
Depending on whether or not you are going to gzip your JavaScript files may change your choice of compressor. (Currently Packer isn't the best choice if you are also going to gzip, but see the above question for the current best answer)
Dojo Shrinksafe 是一个 Javascript 压缩器，它使用真正的 JS 解释器，因此它不会破坏您的代码。 其他的可以很好地工作，但 Shrinksafe 是在构建脚本中使用的一个很好的选择，因为您不必重新测试压缩的脚本。
Dojo Shrinksafe is a Javascript compressor that uses a real JS interpreter, so it won't break your code. The other ones can work well, but Shrinksafe is a good one to use in a build script, since you shouldn't have to re-test the compressed script.
我很惊讶没有人建议对您的代码进行 gzip 压缩。 直接节省 50%！
I'm surprised no one suggested gzipping your code. A straight ~50% saving there!
您可以使用以下在线工具来执行此操作：-
要缩小 Java 脚本代码，您可以使用 Javascript在线压缩工具。 这是目前最好的 js minifier/un-minifiers
要缩小 css 代码，您可以使用 CSS Minifier/缩小工具。 这是目前最好的 css minifier/un-minifiers
以上是我认为对您有用的工具。
Here are the online tools by which you can do this:-
For minifying java script codes, you can use Javascript Online Minifier Tool. This is currently best js minifier/un-minifiers
For minifying css codes, you can use CSS Minifier/Minify Tool. This is currently best css minifier/un-minifiers
Above are the tools which I seems to be useful for you.
我建议不要直接调整文件，而是压缩它们。 大多数客户都支持。
我想您会发现这更容易而且同样有效。
Jeff 的冒险经历的更多详细信息。
Rather than tweaking your files directly, I would recommend compressing them. Most clients support it.
I think you'll find that this is easier and just as effective.
More details from Jeff's adventures with it.
压缩和缩小（删除空格）是一个开始。
另外：
将所有 JavaScript 和 CSS 包含内容合并到一个文件中。 这样浏览器就可以通过对服务器的单个请求下载源代码。 将此作为构建过程的一部分。
使用 在 Web 服务器级别打开缓存缓存控制 http标头。 将到期时间设置为一个较大的值（例如一年），以便浏览器只会下载源一次。 为了便于将来编辑，请在查询字符串中包含版本号，如下所示：
Compression and minify-ing (removing whitespace) are a start.
Additionally:
Combine all of your JavaScript and CSS includes into a single file. That way the browser can download the source in a single request to server. Make this part of your build process.
Turn caching on at the web-server level using the cache-control http header. Set the expiry to a large value (like a year) so the browser will only download the source once. To allow for future edits, include a version number on the query-string, like this:
<script src="my_js_file.js?1.2.0.1" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="my_css_file.css?3.1.0.926" />CssTidy 是我所知道的最好的 CSS 优化器。 它（可配置）删除注释，消除空格，重写以使用许多速记规则 nickf提到等。正如其他人提到的那样，压缩结果也有帮助。
压缩率可以相当显着，它使您可以广泛地注释 CSS，而不必担心文件大小。
不幸的是，这种级别的预处理会以不可预测（或可预测但不受欢迎）的方式与一些流行的“css hack”进行交互。 有些工作，有些不需要，有些需要配置设置来降低压缩级别其他事情（尤其是评论）。
CssTidy is the best CSS optimizer of which I am aware. It (configurably) strips comments, eliminates whitespaces, rewrites to use the many shorthand rules nickf mentioned, etc. Compressing the result helps too, as others have mentioned.
The compression ratio can be fairly dramatic, and it frees you to comment your CSS extensively without worrying about the file size.
Unfortunately, this level of preprocessing interacts with some of the popular "css hacks" in unpredictable (or predictable but undesired) ways. Some work, some don't, and some require configuration settings which reduce the level of compression for other things (especially comments).
我发现 JScompress 是一种很好的方法，不仅可以缩小 JavaScript，还可以组合多个脚本。 如果您只使用各种脚本一次，则很有用。 压缩前节省了 70%（压缩后也节省了 70%）。
请记住随后添加回所有版权声明。
I found JSCompress a nice way to not only minify a JavaScript, but to combine multiple scripts. Useful if you're only using the various scripts once. Saved 70% before compression (and something similar after compression too).
Remember to add back in any copyright notices afterwards.
我将在 http://www.codeplex 上发布的 ASP.Net 中测试新的运行时优化器.com/NCOptimizer
I'd give a test-drive to the new runtime optimizers in ASP.Net published on http://www.codeplex.com/NCOptimizer
尝试使用来自 Boryi 的 Web 压缩工具来压缩您的标准 HTML 文件（无需 Javascript 代码）和嵌入的 css 代码，但可以链接或导入）、Javascript 代码（正确以 ; 结尾）和 css 代码。
Try web compressor tools from Boryi to compress your standard HTML file (without Javascript code and css code embedded, but can be linked to or imported), Javascript code (properly ended with ;), and css code.
YUI Compressor 在压缩 Javascript 和 CSS 方面做得非常好。
YUI Compressor does a pretty good job at compressing both Javascript and CSS.
我投票的是 YUI Compressor，原因很简单，它不是仅仅对代码执行正则表达式转换，而是实际上构建了代码的解析树（类似于 Javascript 解释器），然后以这种方式对其进行压缩。 它通常非常谨慎地处理标识符的压缩。
此外，它还有 CSS 压缩模式，但我没怎么用过。
YUI Compressor has my vote, for the simple reason that instead of just performing regular expression transformations on the code, it actually builds a parse tree of the code, similar to a Javascript interpreter, and then compresses it that way. It is usually very careful about how it handles the compression of identifiers.
Additionally it has a CSS compression mode, which I haven't played with as much.
Minify 似乎是缩小 Javascript 最简单的方法之一。
在 Web 服务器级别打开 zip 也会有所帮助。
Minify seems to be one of the easiest ways to shrink Javascript.
Turning on zip at the web server level can also help.
除了使用服务器端压缩之外，使用智能编码是保持较低带宽成本的最佳方法。 您始终可以使用 Dean Edward 的 Javascript Packer 等工具，但对于 CSS，请花时间学习 CSS 速记。 例如使用：
...而不是：
另外，使用 CSS 的级联特性。 例如，如果您知道您的网站将使用一种字体系列，请为 body 标记中的所有元素定义该字体系列，如下所示：
另一件有帮助的事情是将 CSS 和 JavaScript 作为文件包含在内，而不是内联或在每页的页眉。 这样，在浏览器从缓存中访问之后，您的服务器只需向浏览器提供一次它们。
包括 JavaScript
包括 CSS
In addition to using server side compression, using intelligent coding is the best way to keep bandwidth costs low. You can always use tools like Dean Edward's Javascript Packer, but for CSS, take the time to learn CSS Shorthand. E.g. use:
...instead of:
Also, use the cascading nature of CSS. For example, if you know that your site will use one font-family, define that for all elements that are in the body tag like this:
One other thing that can help is including your CSS and JavaScript as files instead of inline or at the head of each page. That way your server only has to serve them once to the browser after that browser will go from cache.
Including Javascript
Including CSS