小tip：我是如何初体验uglifyjs压缩JS的

这篇文章发布于 2013年01月18日，星期五，18:04，归类于 JS相关。 阅读 211103 次, 今日 4 次 32 条评论

 

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2946

补充于2018-08-09
uglifyjs不支持ES6.也就是ECMASCript2015+的JS压缩，试试使用babeljs。

一、故事总有其背景

年末将至，很多闲适的时间，于是刷刷微博，接触各种纷杂的信息——美其名曰“学习”。运气不错，遇到了一个新名词，uglifyjs. 据说是用来压缩JS文件的，据说还能优化JS,据说是基于node的，还据说比Google Closure Compiler更带感，哦？激起了我的好奇心。百之谷之，哟，相关的介绍还不少。然后折腾了个把小时，基本上知道了是个怎么回事。

我觉得吧，还是有些用的，即使是不是从事node开发的人，抽个小空，share之，于是就有了本文。人总有浮躁的时候，我也不例外，uglifyjs内部深入的运作是如何的，唉，我是有气无力，不想去折腾，所以，本文更多是停留在应用层面。不过嘛，这样反而受众面广一些。毕竟喜欢看《泰囧》的人要比《一代宗师》的多。

二、node相关的固定流程

凡事提及node应用，无非免不了类似下面的流程：

  1. 安装node
  2. 安装nmpnpm
  3. 安装当前应用 – uglifyjs

前两个网上太多示意了，我之前也讲过，sorry, 我很懒。
uglifyjs安装如下code:

npm install uglify-js -g

一个回车，于是啪啪啪，就有下图所示的东东：
uglifyjs安装显示截图 张鑫旭-鑫空间-鑫生活

于是，下面就可以压缩JS了。

三、uglifyjs JS压缩

uglifyjs压缩有很多的参数，详见其github托管项目。其中有一些可选参数，如下部分截图：
uglifyjs的一些可选参数截图

什么美化压缩，空格多长，变量名是否变成短名字等……您有兴趣可以自己去看看，如果今天不是星期五，如果不是要赶回去买菜，我就会翻译下的——诸位，请原谅我吧，阿门！

下面演示如何使用uglifyjs压缩JS.

我的桌面上有个名叫formini的文件夹，我会把要压缩的文件放在其中，然后再压缩。现在，我从内部拷贝了一个名叫inet.js的JS文件到这个文件夹中，然后：

  1. 打开cmd, 这个不会我就没有办法了
  2. 目录引到formini文件夹，cd 然后什么什么的，这个不会我也没有办法了
  3. 如下代码： 
    uglifyjs inet.js -o inet-min.js
  4. 再运行如下代码，测试-m可选参数： 
    uglifyjs inet.js -m -o inet.min.js

    如下截图：
    压缩运行代码

噢啦，现在就是看结果了，见下截图：
压缩后的JS文件大小 张鑫旭-鑫空间-鑫生活

90K的是没有运行-m参数的，70K(69.4)的是运行的。-m参数所以就是把变量名变成a, b, c, d, ...

从实际应用角度讲，上线的JS显然要压缩变量，减小一定的文件尺寸。

跟YUICompressor相比，大小只小了0.6K, 不过网上反映uglifyjs相比YUI压缩很明显，我这里的大小仅优化了0.6÷174=0.345%，这只能说明我写的代码还算比较优化，哈哈（突然想起了老婆的话，不要得瑟，深呼吸……深呼吸……）！
YUICompressor压缩后的大小

更新于2017-12-13
如果压缩的时候想要保留版权信息，可以如下使用：

uglifyjs script.js --comments -m -o script-min.js

当然，注释需要有一些特别的标志量。

首先需要是JSDoc-style样式风格的注释，然后评论中需要包含"@license"或者"@preserve"就可以了。

四、uglifyjs压缩批处理

我们不可能每次都打开cmd去键入压缩执行代码，容易写错不说（如上面那个结果图），还耗时，想想都会让人疯掉。懒人有懒法，花了点功夫，折腾了一个批处理文件，以后，想要压缩JS，只要双击运行这个.bat文件就可以了！完整代码如下：

@echo off
:: 设置压缩JS文件的根目录，脚本会自动按树层次查找和压缩所有的JS
SET JSFOLDER=C:\Users\Administrator\Desktop\formini
echo 正在查找JS文件
chdir /d %JSFOLDER%
for /r . %%a in (*.js) do (
    @echo 正在压缩 %%~a ...
    uglifyjs %%~fa  -m -o %%~fa
)
echo 完成!
pause & exit

新建一个txt文档，任意命名，将上面的代码粘贴进去，修改JSFOLDER后面的文件夹目录为你自己的，然后把.txt后缀改成.bat就可以啦！然后双击就可以批量使用uglifyjs压缩JS文件啦！

四、结束语

对于自己来讲，本文内容算作备忘。目前而言，我还是uglifyjs不能压缩CSS文件。不过嘛，了解下总会有帮助的。行文匆忙，文中要是有表述不准确的地方欢迎指正。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2946

（本篇完）

相关文章
«上一篇
下一篇»
分享到：
标签： , , ,


发表评论（目前32 条评论）

  1. r7说道：
    2021年02月28日 21:07

    哥，你这文章写得真是备忘录啊……感觉好像只适用于你自己或者个别人，为啥批处理那个我完全没效果……，我是用的你的代码啊……要裂开了

    回复
    • dhclly说道：
      2021年11月29日 14:20

      。。。，你基础的 npm install uglify-js -g 搞了没，另外SET JSFOLDER=C:\Users\Administrator\Desktop\formini 这个是你的目标目录？
      网络上的文章肯定更多是参考了，真想开箱即用啊？

      回复
  2. William说道：
    2019年04月9日 09:34

    欧拉欧拉欧拉！

    回复
  3. 请问会计说道：
    2018年12月4日 15:24

    我想萨达

    回复
  4. 鹏展博说道：
    2015年12月20日 18:09

    建议用gulp

    回复
  5. xdemo说道：
    2015年11月26日 14:35

    我恨你…你这个文章太坑爹了

    回复
  6. 袁源说道：
    2015年06月29日 16:15

    赞批处理

    回复
  7. ioriandy4说道：
    2015年05月10日 19:16

    这样压缩了，文件名变成xxx.min.js，但是html里面的文件名不是要一个一个地改吗，有没有简便方法呢

    回复
  8. 留名的牛说道：
    2015年04月30日 13:41

    都已经装了node npm 了 就直接装个gulp 来处理了

    回复
  9. 崔崔说道：
    2014年09月25日 15:25

    为什么我批量压缩的时候，执行过之后，没有找到压缩后的文件的文件呢？求指导啊

    回复
  10. 左博尔说道：
    2013年12月9日 19:13

    结合批处理是很爽的

    回复
  11. me500说道：
    2013年06月28日 12:16

    请问uglifyjs有没有把js中的汉字转换为unicode的功能，或者说工具？
    比如把你的名字转换为 alert(‘\u5f20\u946b\u65ed’);

    回复
  12. 滴洋说道：
    2013年05月23日 19:04

    关于你的批处理文件，如果我想把*.js文件都压成*.min.js 那个bat该怎么写

    回复
    • hap说道：
      2013年11月20日 17:09

      同问，同问，同问

      回复
      • hap说道：
        2013年11月20日 17:51

        在“DOS(BAT),汇编”群里面的“%0-tt”同学的帮助， 这个问题解决了
        “`
        @echo off
        SET JSFOLDER=K:\K\W\wap\script
        echo 正在查找JS文件
        chdir /d %JSFOLDER%
        for /r . %%a in (*.js) do (
        @echo 正在压缩 %%~a …
        FOR /F “DELIMS=” %%I IN (“%%~DPNa”)DO (
        IF /I NOT “%%~XI”==”.MIN” uglifyjs %%~fa -m -o %

        %~DPNa.min.js
        )
        )
        echo 完成!
        pause & exit
        “`

        回复
        • 批量压缩后转换文件名说道：
          2013年12月27日 09:52

          请问下这个代码运行不出来怎么回事啊

        • 小欧说道：
          2014年04月21日 16:00

          为什么我运行你们的代码都是错的，能留个联系方式吗， 无语头疼啊

        • 石头说道：
          2015年03月11日 14:44

          把*.js文件都压成*.min.js

          @echo off
          :: 设置压缩JS文件的根目录，脚本会自动按树层次查找和压缩所有的JS
          SET JSFOLDER=E:\formini\js
          echo 正在查找JS文件
          chdir /d %JSFOLDER%
          for /r . %%a in (*.js) do (
          @echo 正在压缩 %%~a …
          uglifyjs %%~fa -m -o %%~DPNa.min.js
          )
          echo 完成!
          pause & exit

  13. image72说道：
    2013年05月19日 14:58

    SET JSFOLDER=C:\Users\Administrator\Desktop\formini

    SET JSFOLDER=%CD%

    压缩当前所在目录

    回复
  14. jc说道：
    2013年04月25日 14:33

    同文件名压缩不利于调试

    回复
  15. Kiwi说道：
    2013年02月21日 16:07

    css压缩可以试试：https://github.com/wangjeaf/CSSCheckStyle

    回复
  16. 胡尐睿丶说道：
    2013年02月4日 14:58

    可以合并压缩么？几个文件压缩成一个。

    回复
    • 耗子说道：
      2013年08月14日 12:22

      胡总，建议先合并再压缩，而不是先压缩再合并，合并可以用https://github.com/gruntjs/grunt-contrib-concat

      回复
  17. 云儿飘飘说道：
    2013年02月1日 15:23

    恩 同意4四楼的 node下有一个grunt的模块 同时在安装一个grunt-compass 之后运行一下grunt wacth 既能实时压缩js 又能 编译scss

    回复
  18. renzhe说道：
    2013年01月22日 13:12

    百度有个叫“前端开发工具箱”的应用，提供快速的uglifyjs压缩功能

    回复
  19. ax1.1说道：
    2013年01月21日 13:54

    既然看了uglifyjs,建议再看个gruntjs,有连贯性
    是个构建工具,就是负责压缩(uglifyjs)\合并\检查\部署一系列的麻烦事
    jquery也用的这个

    回复
  20. lynn说道：
    2013年01月20日 15:03

    有错别字啊…你把 安装npm 打成了 安装nmp。就是在node相关流程里面

    其他嘛…没有了，node有时候还是挺好用的。

    什么时候有空介绍一下pomelo的使用呗，或者cocos2d-html5

    回复
  21. ktsos说道：
    2013年01月20日 12:25

    怎么右上角出现

    外链惊人，pixel.gif及boxy-*.png已做手脚，如有冒犯还望见谅！

    被黑了吗？

    回复
  22. hdcn说道：
    2013年01月19日 00:08

    整个过程并没有提到压缩后的JS是否有语法错误，是否执行无误，只评价了压缩的文件大小，嗯，打回去重写

    –执着的QA留言

    回复