• 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,则保留了所有的注释。

  • 相关阅读:
    mac修改brew源
    分屏工具xpanes
    MySQL自增id不连续问题
    Ubuntu16.04安装zkui
    antlr解析hive语句
    Elasticsearch学习笔记——索引模板
    Elasticsearch6.2.1安装elasticsearch-sq插件
    多用户同时操作一条Mysql记录问题
    Nexus上传npm包
    Nginx请求转发
  • 原文地址:https://www.cnblogs.com/answercard/p/3713018.html
Copyright © 2020-2023  润新知