你用什么来最小化和压缩JavaScript库?

54

你使用什么工具来压缩和最小化JavaScript库?


发起悬赏以查看自2009年以来是否有任何新进展。 - Pekka
2
这个问题的措辞方式应该是社区维基的。任何人都可以回答这个问题(即使答案是“没有”),而且不可能有错误的答案... - Guffa
17个回答

42

我长期使用YUI压缩器,并且一直没有遇到什么问题,但最近我开始使用Google Closure Compiler并且获得了一些成功。 我目前对此的印象:

  • 它通常在文件大小减小方面优于YUI压缩器。 在简单模式下略微优于YUI压缩器,而在高级模式下则有很大的优势。
  • 迄今为止,简单模式与YUI压缩器一样可靠。 没有任何我使用它进行压缩时出现的问题。
  • 高级“编译”模式非常适合某些脚本,但是剧烈的脚本大小缩小是以大量干扰您的代码为代价的,这会给代码打破带来较大风险。 有方法来解决其中的一些问题,了解它正在做什么可以帮助避免问题,但我通常避免使用此模式。

我已经切换到使用Google Closure Compiler的简单“编译”模式,因为它通常比YUI压缩器表现更好。 尽管我使用Google Closure Compiler的时间比使用YUI压缩器的时间短得多,但从目前我所看到的情况来看,我会推荐它。

另外一个我尚未尝试过但听起来很有前途的是Mihai Bazon的UglifyJS


2
Google Closure Compiler是我绝对推荐的。就像你一样 - 简单模式只需运行...没有任何问题。 - Adam

34

根据我的经验,YUI Compressor 是最安全、同时又是最激进的代码压缩工具。 - Mark Struzinski
YUIcompressor 有一些副作用。它带有一个有问题的 Rhino 版本,会破坏使用 Rhino 的任何服务器端 JavaScript。 - fforw
1
如果您愿意,可以将此在线版本的链接添加到其中,有时我只想快速转换一个文件。http://www.refresh-sf.com/yui/ - Marko

23
您有许多选择: 根据我的个人经验,我建议您使用 Dojo SDK 构建自定义构建,然后再配置为使用他们通常的 ShrinkSafe 编译器或 Google Closure,他们现在也支持
就压缩而言,我认为Google Closure是迄今为止给我带来最佳结果的一个,但我通常对ShrinkSafe感到满意,它有点老旧但更加稳健,而Closure Compiler似乎是一个新生事物(你的利益相关者可能不太喜欢这一点)。
有些人只信奉YUI Compressor。我个人并不能真正为它作证。
现在,如果你的问题是要压缩库而不仅仅是你自己的JavaScript代码,那么显然会更加复杂,因为大多数这些工具都需要导出不应重命名或剥离的符号。大多数体面的压缩器都会删除它们认为未使用的函数 - 在库中通常是这种情况,如果没有绑定到项目上,当然 - 并更改名称使其更短且使用更少的字符 - 这也是一个问题,因为你显然希望公共API不被篡改。
你也可以在其他主题上找到关于此主题的其他线索,并在工具的支持文档中找到信息。 你可能还想看看JSBuilder2,它是Dojo Build工具的某种垂饰(因此使用ShrinkSafe或Closure Compiler),用于ExtJS(使用YUI压缩器)。
(抱歉,作为一个新的SO用户,我不能添加多个链接,所以我无法直接链接到这些工具。)
编辑:关于一些答案中表达的压缩可能会引入错误并且它使调试更容易因为代码没有被篡改的担忧:是的,这是一个有效的问题。但是:
  • 如果您使用缩小器,即使启用gzip压缩,带宽方面也会有显著的改善(而且您可以学习如何通过使压缩器的生活更轻松来利用gzip压缩)。
  • 您应该在调试和生产模式下尝试代码,以确保行为相同。我的意思是,这也是您的工作的一部分...
  • 其中一些压缩器已经存在一段时间了,并不会真正引入错误到您的代码中。它们只是重新组织事物并替换字符串。
  • 某些压缩器(例如dojo构建系统)配有选项,允许您生成压缩和未压缩输出,以便您可以使用查询参数为调试和生产启用不同模式。

12

我完全没有轻视 JavaScript:gzip 压缩对我来说已经足够好了,并且还有额外的好处是错误信息仍然能够很有用。


3
尽量减少代码更改可能会引入漏洞。 - mark
1
当然可以,但它仍然比仅使用gzip压缩带来了一些额外的好处。只需确保您使用缩小版本进行所有测试即可。 - Tim Down
1
那么对于已经安装了防病毒软件或因其他原因而阻止enableGzip的用户怎么办? - Louis
4
当我们看到像jquery这样的东西,压缩后24kb,未压缩155kb时,加载文件的速度会提高超过五倍,这是相当惊人的比例。如果我用gzip下载未压缩的文件,我们得到一个48kb的文件,如果我下载gzip压缩后的文件,它仍然是24kb(显然)。在认为文件大小不重要之前,我们应该考虑文件的大小以及它对速度的要求。对于针对速度的相对较大的库jquery而言,使它尽可能小是很重要的,即使gzip只有两倍大小。 - Incognito

11

我也使用YUI Compressor。我的项目中有一个类似这样的Ant任务:

<!--
YUI Compressor tasks 
http://www.julienlecomte.net/yuicompressor/README
-->
<property name="yuicompressor.jar"
           value="C:/devlibs/yuicompressor-2.2.4/build/yuicompressor-2.2.4.jar"/>

<target name="js.compress">
    <!-- Create min directory under js direcrtory if it doesnt exist -->
    <mkdir dir="${js-directory}/min" />

    <apply verbose="true" executable="java" parallel="false" failonerror="true">
        <fileset dir="${js-directory}" includes="*.js"/>
        <arg line="-jar"/>
        <arg path="${yuicompressor.jar}"/>
        <srcfile/>
        <arg line="-o"/>
        <mapper type="glob" from="*.js" to="${js-directory}/min/*-min.js"/>
        <targetfile/>
    </apply>
</target>

5

UglifyJS是一款新的工具。

相比YUI Compressor,UglifyJS压缩效果更好,而且和Google Closure Compiler差不多。例如,使用Google Closure Compiler压缩后的jQuery版本比使用UglifyJS压缩后的版本仅少403字节 - 令人印象深刻!而且,UglifyJS运行速度也是最快的,比Closure快6秒以上!

此外,UglifyJS生成的代码比Closure更安全。例如,Closure不知道如何处理eval或with{},它只会记录一个错误并继续重命名变量。这显然会导致代码出错。但UglifyJS没有这个问题。

更多信息请参见: http://badassjs.com/post/971960912/uglifyjs-a-fast-new-javascript-compressor-for-node-js


5

6
因为在浏览器中解压缩的开销,打包程序被证明比常规压缩更差。 - Magnar

4

谷歌的Closure工具

你可以使用他们的插件,将压缩版本映射到常规源代码,以便在Firebug中进行调试。


3
以下是翻译的结果:

微软提供了一个解决方案,您可以将其集成到Visual Studio中,在构建项目时自动压缩文件。

安装方法:

从以下链接下载msi文件:http://aspnet.codeplex.com/releases/view/40584

完成后,您可能需要重新启动计算机。

使用方法:

编辑 .csproj 文件,在文件末尾添加以下内容(但在</Project>标记之前):

<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />

<Target Name="AfterBuild">
    <ItemGroup>
        <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
        <CSS Include="**\*.css" Exclude="**\*.min.css" />
    </ItemGroup>
    <AjaxMin 
    JsSourceFiles="@(JS)"
    JsSourceExtensionPattern="\.js$"
    JsTargetExtension=".min.js"
    CssSourceFiles="@(CSS)"
    CssSourceExtensionPattern="\.css$"
    CssTargetExtension=".min.css"/>
</Target>

现在,当您构建项目时,所有不以.min.js、.min.css结尾的CSS和js文件都将被压缩(请参见“排除”属性以排除其他文件不进行压缩)。


3

Douglas Crockford 是雅虎的 JavaScript 架构师。我认为他是 YUI 压缩器的架构师。 - Swanand
1
Doug在雅虎工作,但他是JSMin的创造者。YUI压缩器是由Julien Lecomte创建的。它是用Java编写的 - 我不认为Doug会再回到编写Java :) - johnhunter

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接