UglifyJS--javascript代码压缩使用指南{转}

在线测试地址 http://lisperator.net/uglifyjs/
下面都是基于linux系统的安装使用.
UglifyJS是遵循了CommonJS规范写成的,可以在支持CommonJS模块系统的javascript环境中运行。当然,这是官方的说法,通俗的说,就是可以在浏览器里和node.js的环境中兼可运行了。

UglifyJS的作者在今年9月份的时候,开始了UglifyJS2的项目,作者本人也是比较推崇UglifyJS2,因此,本文就只是关于UglifyJS2的一些介绍。下文中所有的UglifyJS都是指代UglifyJS2。
UglifyJS其实不仅仅是个js的压缩工具,同时可以对代码进行最小化,和美化的工具包。

担心篇幅太长,在这里只做关于node.js环境下使用UglifyJS的介绍。

1. 安装:
—— 从npm安装

npm install uglify-js

—— 从github安装

git clone git://github.com/mishoo/UglifyJS2.git
cd UglifyJS2
npm link .

2. 概述:
在控制台/命令行中输入uglifyjs
–help,如果出来帮助信息,表明uglifyjs可以正确使用了。

uglifyjs [input files] [options]

举个栗子:

// 有个叫main.js的待压缩/美化的文件
uglifyjs main.js -o main-min.js -c

uglifyjs的作者建议的就是先把文件放在前面,再把一些压缩/美化的参数跟在后边。

一些常用的参数列表

-o,--output      指定输出文件,默认情况下为命令行
-b,--beautify 美化代码格式的参数
-m,--mangle 改变变量名称(ex:在一些例如YUI Compressor压缩完的代码后你可以看到
a,b,c,d,e,f之类的变量,加了-m参数,uglifyjs也可以做到,默认情况下,是不会改变变量名称的)
-r,--reserved 保留的变量名称,不需要被-m参数改变变量名的
-c,--compress OK,主角登场了,这是让uglifyjs进行代码压缩的参数。可以在-c后边添加
一些具体的参数来控制压缩的特性,下文中会具体介绍。
--comments 用来控制注释的代码的

3.
变量名压缩

你需要传入-m来进行变量名的压缩(将一系列很长的变量名压缩为a,b,c,d,e,f云云)。当使用了-m参数进行改变变量名时,如果还想保留一些变量名让他们不被改变,就需要用–reserved
(-r) 。例如

uglifyjs ... -m -r ‘$,require,exports‘

4. 进行压缩的选项
当使用了–compress (-c)
参数时,就启用了uglifyjs对代码的压缩的功能。你可以在-c后边传入一系列逗号分开的选项来指定压缩的具体特性。
对于这些选项使用的方法,可以参考下文中的“代码美化选项”部分。
(巴拉巴拉巴拉,此处省去一千字就不做具体的介绍了。总而言之,你可以让uglifyjs可选的除去你在代码中留下的debugger的等等关键字,或是各种变态的注释等等,一般用户这里忽略了,如真有特殊需求,可以自己翻阅文档。)

4.1 预编译选项
你可以使用–define
(-d)来定义一些给uglifyjs压缩/美化代码的时候使用的变量,此话怎讲呢?说着玄乎,其实举个例子就能明白了。为了调试代码,你可以在你的代码中加入如下的示例

if (DEBUG) {
console.log("debug stuff");
}

当然,在最后发布的时候。普通的码农呢,会勤勤恳恳的一个个把这样的调试代码给删除掉,但是万一工程过于庞大,溜掉了一两个也是无可厚非的。聪明的码农呢,就会用到了uglifyjs中的-m这个选项了。
首先要保证的就是DEBUG不是一个本地的变量,再使用如下命令

uglifyjs -o main-min.js main.js -c --define DEBUG=true

得到的main-min.js文件中,上边的调试代码就不见了。是不是很cool?

还有种使用预编译选项的方式,就是把预编译的所有选项放到一个js文件中。例如,有个define文件,有如下内容

const DEBUG = false;
const PRODUCTION = true;
// etc.

注:必须要使用const来声明需要预编译的变量。
用如下的方式编译你的代码

uglifyjs build/defines.js js/foo.js js/bar.js... -c

最终起到的效果和上面是一样的。

5.
代码美化选项

从博主的个人角度来讲,觉着这个有必要学习下,代码规范在什么时候都是一个码农离不开的话题。为了保证在一个大型项目中,你的代码具有良好的可读性,可以由jsdoc之类的工具生成一份具体的文档供别人阅读是很有重要的。
uglifyjs提供的代码美化的选项比较有限,就算是代码压缩功能的一个附属小功能吧。
这里需要强调下的是,美化中的所有选项,是对-b参数而言的,就是说在使用的时候,这些选项需要放在-b后边,例如:

beautify        进行代码的美化,默认的情况下等于-b beautify=true,你也可以吧beautfy设置为false跳过
美化步骤。
indent-level 设置代码缩进,例如github默认的情况下缩进是2个tab,默认的数值为4,例如
(uglifyjs -o main-min.js main.js -b "indent-level=2")
indent-start 对代码进行整体缩进默认值为0,可以这么使用
(uglifyjs -o main-min.js main.js -b "indent-start=4,indent-level=8")
quote-keys 默认为false。如果设置为true,则将所有对象中的键用引号引起来
space-colon 会在一个单引号后边插入一个空格
ascii-only 转义Unicode字符
inline-script 转义js代码字符串变量中的script标签
width 设置代码的宽度,默认情况下是80

5.1 保留copyright字样或者是其他的一些注释
默认的情况下uglifyjs只会保留符合jsdoc规范的注释。
你可以在–comments后面加上一串正则表达式,来匹配出你需要保留的注释,例如–comments
‘/foo|bar/’。
如果在–comments后加了个all,则保留了所有的注释。

时间: 2024-08-28 20:14:52

UglifyJS--javascript代码压缩使用指南{转}的相关文章

javascript 代码压缩

在线压缩网站http://tools.css-js.com/compressor.html UglifyJS 是用 NodeJS 编写的 JavaScript 压缩工具,是目前最流行的JS压缩工具,JQuery 就是使用此工具压缩,UglifyJS 压缩率高,压缩选项多,并且具有优化代码,格式化代码功能,目前国内能提供UglifyJS压缩的都还处在1.0版本,本站率先升级到 2.0 时代.适用于任何支持CommonJS模块的JavaScript平台. YUI compressor 是Java编写

【Java】通过移除空行和注释来压缩 JavaScript 代码

1. [代码]JavaScriptCompressor.java/** * This file is part of the Echo Web Application Framework (hereinafter "Echo"). * Copyright (C) 2002-2009 NextApp, Inc. * * Compresses a String containing JavaScript by removing comments and whitespace. */publ

世界顶级互联网公司 Google JavaScript 代码风格指南

Google 和 Airbnb 是目前最流行的 JavaScript 代码风格,如果你长期使用 JavaScript 来写代码的话,建议对比看看. 以下是我认为在 Google 代码风格指南中最有意思的十三条规则,和大家分享一下: 使用空格,而不是 tab 除了行终止符外,在系统文件中,空格是唯一表示空白的字符,这意味着 tab 不能作为缩进使用. 这份指南规定用2个空格(而不是4个)来表示缩进. // bad function foo() { ????let name; } // bad fu

使用Google Closure Compiler高级压缩Javascript代码注意的几个地方

介绍 GCC(Google Closure Compiler)是由谷歌发布的Js代码压缩编译工具.它可以做到分析Js的代码,移除不需要的代码(dead code),并且去重写它,最后再进行压缩. 三种压缩模式 GCC提供三种压缩模式: 1)Whitespace only 2)Simple 3)Advanced 我们以这段简单的代码为例 function sayHello(name) { alert('Hello, ' + name); } sayHello('binnng'); 分别使用这三种压

javascript的压缩合并工具

一.使用RequireJS的压缩合并 使用RequireJS模块化后代码被拆分成多个JS文件了,在部署生产环境需要压缩合并,RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩.r.js非常强大,不但可以压缩js,css,甚至可以对整个项目进行打包. r.js的压缩工具使用UglifyJS或Closure Compiler.默认使用UglifyJS(jQuery也是使用它压缩).此外r.js需要node.js环境,当然它也可以运行在Java环境中如Rhino.JAVA环境使用An

编写简洁的 JavaScript 代码

作者:尹锋链接:https://www.zhihu.com/question/20635785/answer/223515216来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 避免使用 js 糟粕和鸡肋 这些年来,随着 HTML5 和 Node.js 的发展,JavaScript 在各个领域遍地开花,已经从"世界上最被误解的语言"变成了"世界上最流行的语言".但是由于历史原因,JavaScript 语言设计中还是有一些糟粕和鸡肋,比如

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点(转)

才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

[转]7个高性能JavaScript代码高亮插件

对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

javascript 代码可读性

可读性的大部分内容都是和代码缩进相关的,必须保证代码有良好的格式.可读性的另一方面就是注释,一般而言,有如下一些地方需要进行注释 1.1.1           函数和方法 每个函数或方法都应该包含一个注释,描述其目的和用于完成任务所可能使用的算法,陈述事先的假设也非常重要,如参数代表什么,函数是否有返回值等等 1.1.2           大段代码 用于完成单个任务的多行代码应该在前面放一个描述任务的注释 1.1.3           复杂的算法 如果使用了一个独特的方式解决某个问题,则要