压缩CSS和JavaScript文件为了让Web应用程序“轻巧”

本文摘自CSDN http://sd.csdn.net/a/20110922/304824.html

 

问题：空白内容

当开发人员使用CSS或JavaScript文件工作时，空白内容通常是一件好事。空白内容包括缩进文件所使用的字符，增强可读性的间距、以及为了在文章的不同部分添加一个可视间隔而插入的额外空行。空白内容使文件易于阅读和维护。如果CSS文件中有适当数量的空白内容（和注释），将有助于开发人员理解CSS代码的意图。

问题是逐渐增加的空白导致文件不断增大。每个空白行、缩进和括号之间的空格至少占用一个额外字符

 

解决方案：压缩

编写一个删除空白字符的定制脚本最初听起来是一个可行的解决方案，但是在CSS和JavaScript文件中本身都有很重要的空白。因此任何删除空白和压缩文件的工具必须是足够智能，可以区别哪些语言中哪些空白是重要的。

幸运的是，在社区中已经可以找到这种工具了，它们已经经过资源（比如 CSS 和 JavaScrip 文件）压缩测试了。其中一个工具就是 YUI Compressor，一个来自Yahoo! Developer Network的可用工具。

 

YUI Compressor

YUI压缩器是一个使用Java编写的程序，拥有Berkeley Software Distribution许可证。YUI Compressor可以缩小（压缩）CSS和JavaScript代码，这样无需自己编写工具就可以享受小资源带来的益处了。首先，可以下载YUI Compressor，然后提取文件，放置到一个容易访问的位置。归档文件包括完整源代码和一个用于构建YUI Compressor的Apache Ant 脚本（build.xml）。在原文中，作者以代码实例诠释了如何CSS和JavaScript文件(您可以点击这里查看更多代码实例)。

通过YUI，以下优化将在JavaScript文件中执行：

•     删除空白。从JavaScript代码中删除所有不重要的空白，包括新行。
•     删除注释。从 JavaScript文件中删除所有注释，除了这些C风格的注释，以 /*! 序列开始的。如果公司版权或者其他信息必须保留在文件中，务必使用该序列包含注释内容。
•     重命名 Method-scoped 变量。除非使用YUI Compressor 命令的 --nomunge选项，否则YUI Compressor将自动缩短JavaScript文件中的变量名。（将变量声明单独留在函数外，假设它们可能会用于其他地方）。由于JavaScript语言中的变量名仅需至少一个字符，就能为JavaScript文件节省相当多字符。替换变量稍微混淆JavaScript代码，但是由于不需要修改代码版本，应该问题不大。
•     删除分号。像压缩CSS一样，一些不重要的分号（;）将被从JavaScript代码中删除。

    其他选择。--line-break 选项对于分离文件可能是重要的，因此这一行不能太长。（优化时 YUI Compressor会删除换行符。）