使用yuicompressor 压缩js, CSS

本文介绍如何使用YUICompressor工具压缩JavaScript和CSS代码,以提升网页性能。提供了详细的命令行使用方法及注意事项,包括压缩代码的工作原理、字符编码参数设置和优化选项使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

保持web页面的轻量级,提高网页工程设计提升web应用程序的性能永远是一个主要策略。但是,还是有一些其他的辅助策略提升系统系统,像压缩代码, HTTP压缩传输 和使用CSS 精灵等。

压缩代码,广泛使用的工具有  JSMINthe Dojo compressor 和 Packer. 但是这些工具, 或多或少存在着一些缺陷。 比如, JSMIN, 没有产生最佳的压缩效果(由于其简单的算法,它必须留在代码中的许多换行符为了不引入任何新的bug)。

YUI Compressor 可以用来压缩 JS 代码, 同样可以结合Isaac Schlueter's 正则表示是来压缩CSS文件。


下载页面:

https://github.com/yui/yuicompressor/tree/v2.4.8

也可以到 https://skydrive.live.com/redir?resid=5B4EDBCD9EF1AB6B!185&authkey=!AOVPj4qZ5MENcMI&ithint=file%2c.zip  下载


YUI Compressor 是怎么工作的?

YUI Compressor 是用Java编写的(版本>=1.4) , 使用 Rhino 来产生JavaScrip 文件。它先分析javascript 源文件,理解其结果,打印出标识流,省略尽可能多的空白字符,只要合适就使用 1(或2或3)这样的字符来代替本地符号。(对于像eval 或 with 这样一些邪恶的功能, 使用保守的方法不至于混淆含有这些语句的作用域)。CSS的压缩算法使用一组微调正则表达式来压缩源CSS文件。


在命令行方式使用YUI Compressor

在以上下载地址下载的是YUI Compressor 的源代码。首先要把它打包成 jar 档。

将下载的zip  解压。cmd 到目录下。

执行ant , 就产生 .jar 档了。

有了jar 档,就可以对js 或CSS  文件进行压缩了。

举个例子, 要压缩 ext-all.js 这个文件, 只需要执行命令:

java -jar yuicompressor-2.4.8.jar ext-all.js -o ext-all-min.js


具体的使用语法:

java -jar yuicompressor-x.y.z.jar
Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

  Global Options
    -h, --help                Displays this information
    --type <js|css>           Specifies the type of the input file
    --charset <charset>       Read the input file using <charset>
    --line-break <column>     Insert a line break after the specified column number
    -v, --verbose             Display informational messages and warnings
    -o &lt;file&gt;                 Place the output into <file> or a file pattern.
                              Defaults to stdout.

  JavaScript Options
    --nomunge                 Minify only, do not obfuscate
    --preserve-semi           Preserve all semicolons
    --disable-optimizations   Disable all micro optimizations

GLOBAL OPTIONS

  -h, --help
      Prints help on how to use the YUI Compressor

  --line-break
      Some source control tools don't like files containing lines longer than,
      say 8000 characters. The linebreak option is used in that case to split
      long lines after a specific column. It can also be used to make the code
      more readable, easier to debug (especially with the MS Script Debugger)
      Specify 0 to get a line break after each semi-colon in JavaScript, and
      after each rule in CSS.

  --type js|css
      The type of compressor (JavaScript or CSS) is chosen based on the
      extension of the input file name (.js or .css) This option is required
      if no input file has been specified. Otherwise, this option is only
      required if the input file extension is neither 'js' nor 'css'.

  --charset character-set
      If a supported character set is specified, the YUI Compressor will use it
      to read the input file. Otherwise, it will assume that the platform's
      default character set is being used. The output file is encoded using
      the same character set.

  -o outfile

      Place output in file outfile. If not specified, the YUI Compressor will
      default to the standard output, which you can redirect to a file.
      Supports a filter syntax for expressing the output pattern when there are
      multiple input files.  ex:
          java -jar yuicompressor.jar -o '.css$:-min.css' *.css
      ... will minify all .css files and save them as -min.css

  -v, --verbose
      Display informational messages and warnings.

JAVASCRIPT ONLY OPTIONS

  --nomunge
      Minify only. Do not obfuscate local symbols.

  --preserve-semi
      Preserve unnecessary semicolons (such as right before a '}') This option
      is useful when compressed code has to be run through JSLint (which is the
      case of YUI for example)

  --disable-optimizations
      Disable all the built-in micro optimizations

字符编码是比较常用的参数:

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8

其他注意事项:

1. 可以使用 -v 参数, 虽然不能完全替代 JSLint         的功能,但当代码有错误时可以输出一些有用的信息。
2. 如果你想在后端而不是在构建时压缩文件, 你可能想缓存缩小的文件在内存中以提高性能。 YUI Compressor 可以很容易被实例化并使用在java 环境中。




http://yui.github.io/yuicompressor/

雅虎推出的一款javascript压缩工具。有JAVA版本和.NET版本。 yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js //压缩CSS java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css 语法: java -jar yuicompressor-x.y.z.jar [options] [input file] 通用参数: -h, --help 显示帮助信息 --type <js|css> 指定输入文件的文件类型 --charset <charset> 指定读取输入文件使用的编码 --line-break <column> 在指定的列后插入一个 line-bread 符号 -v, --verbose 显示info和warn级别的信息 -o <file> 指定输出文件。默认输出是控制台。 javascript专用参数: --nomunge 只压缩, 不对局部变量进行混淆。 --preserve-semi 保留所有的分号。 --disable-optimizations 禁止优化。 举例: 将yuicompressor-2.4.2.jar 放在c:下,将editor.js放在c:盘下。 将editor.js进行压缩 命令为: C:\java -jar yuicompressor-2.4.2.jar editor.js -o editor2.js 参数说明: yuicompressor-2.4.2.jar 为工具包jar editor.js为要压缩js -o editor2.js压缩完成后的文件名 压缩率: 对resources下js文件夹里163个js文件进行压缩 压缩前4.13MB 压缩后2.89MB 混淆率: 较高 一个windows下的批量处理脚本: @echo off ::设置YUI Compressor启动目录 SET YUIFOLDER=C: ::设置你的JSCSS根目录,脚本会自动按树层次查找和压缩所有的JSCSS SET JSFOLDER=D:\1 echo 正在查找 JavaScript, CSS ... chdir /d %JSFOLDER% for /r . %%a in (*.js *.css) do ( @echo 正在压缩 %%~a ... @java -jar %YUIFOLDER%\yuicompressor-2.4.2.jar --charset UTF-8 %%~fa -o %%~fa ) echo 完成! pause & exi
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值