zoukankan      html  css  js  c++  java
  • 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,则保留了所有的注释。

  • 相关阅读:
    78. Subsets
    93. Restore IP Addresses
    71. Simplify Path
    82. Remove Duplicates from Sorted List II
    95. Unique Binary Search Trees II
    96. Unique Binary Search Trees
    312. Burst Balloons
    程序员社交平台
    APP Store开发指南
    iOS框架搭建(MVC,自定义TabBar)--微博搭建为例
  • 原文地址:https://www.cnblogs.com/answercard/p/3713018.html
Copyright © 2011-2022 走看看