当前位置： 文江博客话题详情

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

发布于 2024-07-14 07:04:52 字数 1539 浏览 9 评论 0原文

原文

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（17）

月朦胧 2024-07-21 07:04:52

我已经使用 YUI Compressor 很长时间了，没有遇到任何问题，但最近才开始使用使用 Google Closure Compiler 并取得了一些成功。 到目前为止我对它的印象：

  • 在减少文件大小方面，它通常优于 YUI Compressor。 在简单模式下少量，在高级模式下大量。
  • 到目前为止，简单模式与 YUI Compressor 一样可靠。 我给它喂的东西都没有显示出任何问题。
  • 高级“编译”模式对于某些脚本来说非常有用，但是脚本大小的大幅减小是以对代码进行大量干预为代价的，这些干预很可能会破坏代码。 有处理其中一些问题的方法并了解它所做的可以在很大程度上避免问题，但我通常避免使用这种模式。

我已经转向在简单的“编译”模式下使用 Google Closure Compiler，因为它总体上稍微优于 YUI Compressor。 我使用它的次数比 YUI Compressor 少得多，但从目前为止我所看到的情况来看，我会推荐它。

另一种我尚未尝试但听起来很有希望的方法是 Mihai Bazon 的 UglifyJS。

I've used YUI Compressor for a long time and have had no problems with it, but have recently started using Google Closure Compiler and had some success with it. My impressions of it so far:

  • It generally outperforms YUI Compressor in terms of file size reduction. By a small amount on simple mode, and by a lot on advanced mode.
  • Simple mode has so far been as reliable as YUI Compressor. Nothing I've fed it has shown any problems.
  • Advanced "compilation" mode is great for some scripts, but the dramatic size reduction of your script comes at the expense of a lot of meddling with your code that stands a decent chance of breaking it. There are ways to deal with some of these problems and understanding what it's doing can go a long way to avoiding problems but I generally avoid using this mode.

I've moved over to using Google Closure Compiler in simple "compilation" mode, because it slightly outperforms YUI Compressor in general. I have used it considerably less than I have YUI Compressor but from what I've seen so far I'd recommend it.

One other that I've yet to try but sounds promising is Mihai Bazon's UglifyJS.

回复 原文
野心澎湃 2024-07-21 07:04:52

我使用 YUI 压缩机。 看起来任务完成得很好！

I use YUI Compressor. Seems to get the job done well!

回复 原文
熊抱啵儿 2024-07-21 07:04:52

您在这里有很多可能性：

根据我的个人经验，我建议您使用 Dojo SDK 来构建自定义构建，然后您可以依次配置为使用常用的 ShrinkSafe 编译器或 Google Closure，他们现在也支持。

在压缩方面，我认为 Google Closure 是迄今为止为我带来最好结果的一个，但是我通常对 ShrinkSafe 感到满意，它有点旧，而且更健壮，而 Closure Compiler 看起来有点新（例如，您的利益相关者可能不太喜欢）。

但有些人只相信 YUI 压缩机。 我个人无法真正保证这一点。

现在，如果您的问题是压缩库而不仅仅是您自己的 JavaScript 代码，那么它显然会涉及更多内容，因为您将需要大多数这些工具来导出不应重命名或剥离的符号。 大多数像样的压缩器都会删除他们认为未使用的函数 - 通常是库中的情况，如果没有绑定到项目，显然 - 并更改名称以使其更短并使用更少的字符 - 这也是一个问题，因为你显然想要一个公共API不可被篡改。

您还可以找到有关此主题的其他主题，并在工具的支持文档中查找信息。
您可能还想看看 JSBuilder2，它是 Dojo 构建工具的某种挂件（因此，使用 ShrinkSafe 或 Closure Compiler）用于 ExtJS（使用 YUI 压缩器）。

（抱歉，作为一名新的 SO 用户，我无法添加多个链接，因此我无法直接链接到工具。）

编辑：关于一些答案中表达的担忧，即压缩可能会引入错误，并且它使调试更容易，因为代码是没有被破坏：是的，这是一个合理的担忧。 但是：

  • 如果您使用压缩器，即使激活了 gzip 压缩，您也会在带宽方面获得非常显着的改进（并且您可以通过使压缩器的工作更轻松来学习利用 gzip 压缩，
  • 您应该在调试和生产模式下尝试您的代码我的意思是，这也是您工作的一部分......
  • 其中一些压缩器已经存在了一段时间，并且不会真正将错误引入您的代码中，它们实际上只是重新组织事物 。实际上，
  • 一些压缩器（例如 dojo 构建系统）附带了一些选项，允许您生成压缩和未压缩的输出，以便您可以启用不同的调试和生产模式，例如使用查询参数。 。

You have a herd of possibilities here:

From my personal experience, I'd recommend that you use the Dojo SDK to build a custom build, which you can then in turn configure to either use their usual ShrinkSafe compiler, or Google Closure, which they now support as well.

In terms of compression, I think Google Closure is the one yielding the best results for me so far, however I am usually satisfied with ShrinkSafe and it's a bit older and more robust, whereas Closure Compiler looks a bit of a new kid on the block (which your stakeholders might not be too fond of, for instance).

Some people swear only by the YUI Compressor though. I personally cannot really vouch for it.

Now if you question was to compress libraries and not just your own JavaScript code, it obviously gets really more involved, as you will need for most of these tools to export the symbols that should not be renamed or stripped. Most decent compressors will remove functions that they think are unused - often the case in a library, if not bound to a project, obviously - and change the names to make them shorter and use less characters - also a problem as you obviously want a public API to not be tampered with.

You can find other threads on this topic as well and find information in the tools' support documentation.
You may also want to have a look at JSBuilder2, some sort of pendant to Dojo's Build tool (so, using ShrinkSafe or Closure Compiler) for ExtJS (using the YUI compressor).

(Sorry, being a new SO user, I cannot add more than one link so I cannot link directly to the tools.)

EDIT: regarding the concerns expressed in some answers that compression might introduce bugs and that it makes debugging easier as the code is not mangled: yes, it's a valid concern. However:

  • you will get a very significant improvement in terms of bandwidth if you use a minifier, even with gzip compression activated (and you can learn to leverage gzip compression by making the compressor's life easier
  • you should just taste your code in debug and production mode to ensure the behavior is identical. I mean, it's part of your job as well...
  • some of these compressors have been around for a while and won't really introduce bugs into your code. They're really just re-organizing things and substituting strings, really.
  • some compressors (for instance the dojo build system) come with options to allow you to produce both a compressed and an uncompressed output, so that you can then enable different modes for debugging and production, using query parameters for instance.
回复 原文
香草可樂 2024-07-21 07:04:52

我根本不会最小化 JavaScript：gzip 压缩对我来说已经足够好了，并且还有一个额外的好处，即错误消息仍然有用。

I don't minimize JavaScript at all: gzip compression is good enough for me and has the additional benefit that error messages will still be useful.

回复 原文
街角迷惘 2024-07-21 07:04:52

我也使用 YUI 压缩机。 我在项目中使用了这样的 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>

I too use YUI Compressor. I have an ant task like this that I use in my projects:

<!--
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>
回复 原文
会傲 2024-07-21 07:04:52

Dean Edward 的加壳器 实现了一些相当不错的压缩比。 它具有命令行实现，允许在持续集成过程中使用它。

Dean Edward's packer achieves some pretty good compression ratios. It has command line implementations which allows it to be used in a continuous integration process.

回复 原文
盛夏已如深秋| 2024-07-21 07:04:52

UglifyJS 是一个新的。

UglifyJS 的压缩效果比 YUI 更好
压缩机与
Google 闭包编译器。 为了
例如，压缩版本
Google 关闭中的 jQuery
编译器仅小 403 字节
比 UglifyJS 生成的版本
- 感人的！ UglifyJS 也是跑得最快的远射，击败了
关闭超过6秒！

此外，生成的代码
UglifyJS 比以下代码更安全
关闭生成。 例如，
关闭不知道怎么处理
eval 或 with{} - 它只记录错误
并继续重命名变量
反正。 显然，这会导致
损坏的代码。 UglifyJS没有
这个问题。

更多信息可以在这里找到：
http://badassjs.com/post /971960912/uglifyjs-a-fast-new-javascript-compressor-for-node-js

UglifyJS is a new one.

UglifyJS compresses better than YUI
Compressor and just about on par with
the Google Closure Compiler. For
example, the compressed version of
jQuery from the Google Closure
Compiler is only 403 bytes smaller
than the version produced by UglifyJS
- impressive! UglifyJS is also the fastest to run by a long shot, beating
Closure by over 6 seconds!

Additionally, the code produced by
UglifyJS is safer than the code that
Closure generates. For example,
Closure doesn’t know how to deal with
eval or with{} - it just logs an error
and continues to rename variables
anyway. This, obviously, leads to
broken code. UglifyJS does not have
this problem.

More information can be found here:
http://badassjs.com/post/971960912/uglifyjs-a-fast-new-javascript-compressor-for-node-js

回复 原文
陪你到最终 2024-07-21 07:04:52

Google 的关闭工具

您可以将缩小版本映射到常规源用于在 Firebug 中使用其附加组件进行调试的代码。

Google's closure tools

You can map the minified version to the regular source code for debugging in Firebug with their add-on.

回复 原文
情域 2024-07-21 07:04:52

我之前尝试过 YUI 压缩器，但它给了我错误消息。

我建议使用 JSMIN 来缩小您的 javascript：

http://www.crockford.com/javascript/jsmin .html

I have tried YUI compressor before, but it gives me error message.

I suggest using JSMIN to minify your javascript:

http://www.crockford.com/javascript/jsmin.html

回复 原文
臻嫒无言 2024-07-21 07:04:52

这是 Microsoft 提供的一个解决方案，您可以将其集成到 Visual Studio 中，以便在构建项目时自动缩小文件。

安装：

从以下位置下载 msi：http://aspnet.codeplex。 com/releases/view/40584

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

使用方法：

编辑您的 .csproj 文件并在文件末尾添加以下内容（但在 标记之前）：

<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 文件都将被缩小（请参阅“排除”属性以排除其他文件被缩小）。

Here's a solution from Microsoft that you can integrate into Visual Studio to minify the files automatically when you build your project.

To Install:

Download the msi from : http://aspnet.codeplex.com/releases/view/40584

You may need to restart your computer after its finished.

To Use:

Edit your .csproj file and include the following at the end of the file (but before the </Project> tag):

<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>

Now when you build your project, all CSS and js files that don't end in .min.js, .min.css will be minified (See the "Exclude" attribute to exclude other files from being minified).

回复 原文
风透绣罗衣 2024-07-21 07:04:52

http://code.google.com/p/jsmin-php/

好老道格·克罗克福德:-) 这样做的美妙之处在于，通过缓存控制，您可以仅在需要时获得一些可爱的自动压缩。 或者在我的一个项目中，我只是输出压缩/gzip 压缩的文件，并在进行更改时将其删除。 对于开发环境，我只是不调用缩小脚本。

http://code.google.com/p/jsmin-php/

Good old Doug Crockford :-) The beauty of this is that with cache control you can get somelovely automated compression only when it is required. Or in one of my projects I just output the compressed/gzipped files and delete them when I make a change. For a development environment, I just dont' call the minification script.

回复 原文
_畞蕅 2024-07-21 07:04:52

我在 JavaScript::Minifier::XS。

I use a simple (3-4 line) wrapper script around JavaScript::Minifier::XS.

回复 原文
一片旧的回忆 2024-07-21 07:04:52

这是一篇文章，描述了如何使用 YUI Compressor 在构建过程中最小化文件： 将 JS 文件压缩为构建过程的一部分

Here is an article which described how to use YUI Compressor for minimizing files during build: Compressing JS files as part of your build process

回复 原文
于我来说 2024-07-21 07:04:52

我使用 Perl 的 JavaScript::Minifier。 它工作得很好，您可以使用 perl 替换一些短语。

I use perl's JavaScript::Minifier. It works pretty well and you can e.g. replace some phrases using perl.

回复 原文
你没皮卡萌 2024-07-21 07:04:52

http://caja.appspot.com/tools/index 执行所有三个 HTML/CSS/ JS。

http://caja.appspot.com/tools/index does all three of HTML/CSS/JS.

回复 原文
︶￣淡然 2024-07-21 07:04:52

https://jawr.dev.java.net/ 非常适合缩小和版本控制

https://jawr.dev.java.net/ is excellent for minification and versioning

回复 原文
写下不归期 2024-07-21 07:04:52

有一个非常好的在线压缩器：

http://javascriptcompressor.com/

如果您想要的话，您还可以缩小变量更压缩。

希望能帮助到你

There is a very good online compressor:

http://javascriptcompressor.com/

You can also shrink variables, if you want even more compresed.

Hope it helps

回复 原文
~没有更多了~

关于作者

删除会话

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文