使用uglifyjs压缩JS

• 背景介绍
  ======
  大家有没有去看过jquery-1.8.3.min.js文件中的代码? 如果有看过你会发现变量名都是a, b , c啥的.且所有的代码没有空格一大长串.这时可能你会疑惑, 为何会这样?

其实这是线上经过压缩后的代码, 一般开发团队都有自己的工作流程, 代码起码要分为开发版和发布版两种.发布版一般都要走压缩混淆的流程.目的是为了减小文件的大小, 尽量减少网络开销.

• Node.js相关流程
  ======

---

1. 安装node.js
2. 安装当前应用 -- uglifyjs

如何安装node.js就不再介绍了, 百度一下一大把.安装uglifyjs如下:

npm install uglify-js -g

image.png

• uglifyjs压缩JS文件
  ======

uglifyjs压缩有很多的参数, 详细可以参阅其[github托管项目][1]. 其中一些参数, 如下截图:

image.png

什么美化压缩, 空格多长等等....想仔细研究的话, 可以自己去其github托管项目中看看. (因为本人英文有限, 就不翻译了).
[1]: https://github.com/mishoo/UglifyJS2

演示如何使用uglifyjs压缩JS

打开一个用于存放JS文件的文件夹,文件目录如下图:

image.png

准备压缩lazyLoad.js做实验, 当前该文件的大小为10KB.我们来进行压缩,看看压缩后的文件大小是多少?

这里给大家介绍一个小技巧, 以方便快速地打开cmd, 并定位到当前目录.

按住Shift键的同时在当前文件下右击, 在弹出的菜单中选择"在此处打开命令窗口"即可.

image.png

点击"在此处打开命令窗口"后即可以进入到cmd, 你会发现已经切换到当前文件所在的路径了.
此时输入命令对lazyLoad.js文件进行压缩并输出文件名为lazyLoady.min.js的文件:

uglifyjs lazyLoad.js -o lazyLoad.min.js

也可以运行如下代码, 测试一下-m参数:

uglifyjs lazyLoad.js -m -o lazyLoad.min.js

image.png

查看一下结果, 如下截图:

image.png

可以看到, 压缩后只有3KB, 相比之前的, 文件缩小了3倍多.快去试下吧!

• 结束语
  ======
  对于自己来说, 本文就相当于做笔记. 需要注意的是, uglifyjs只能压缩js文件(且只支持ECMAScript 5: ES5).
  行文匆匆, 文中要是有什么不正确的地方, 欢迎指正!