一、故事总有其背景

年末将至,很多闲适的时间,于是刷刷微博,接触各种纷杂的信息——美其名曰“学习”。运气不错,遇到了一个新名词,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

一个回车,于是啪啪啪,就有下图所示的东东:

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

三、uglifyjs JS压缩

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

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

下面演示如何使用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

    如下截图:

噢啦,现在就是看结果了,见下截图:

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

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

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

四、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文件。不过嘛,了解下总会有帮助的。行文匆忙,文中要是有表述不准确的地方欢迎指正。

uglifyjs压缩JS的更多相关文章

  1. uglifyjs压缩JS的

    一.故事总有其背景 年末将至,很多闲适的时间,于是刷刷微博,接触各种纷杂的信息——美其名曰“学习”.运气不错,遇到了一个新名词,uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基 ...

  2. 小tip:我是如何初体验uglifyjs压缩JS的

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2946 一.故事总有其 ...

  3. 使用uglifyjs压缩JS

    一般vue项目完成打包以后需要优化,特别是首次打开加载速度们,webpack打包以后js文件体积很大等方法,可以用这个方法来压缩js文件 安装node.js 安装当前应用 -- uglifyjs 如何 ...

  4. uglifyjs压缩js文件(指令压缩/ 批量压缩/ 编程方式压缩)

    一.指令压缩 1.安装node,npm——详细见nodejs安装与使用入门 2.安装 uglifyjs——npm install -g uglify-js 3.压缩例子:1)uglifyjs  mai ...

  5. 利用Node 搭配uglify-js压缩js文件,批量下载图片到本地

    Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面 ...

  6. uglifyjs 压缩js

    第一步 安装nodejs dos下执行 node -v npm -v

  7. uglifyjs压缩批处理

    uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基于node的,还据说比Google Closure Compiler更带感. uglifyjs压缩批处理我们不可能每次都打开cm ...

  8. uglifyjs压缩批处理,.bat文件启动

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

  9. npm压缩js文件

    参考:https://blog.csdn.net/msy_msy/article/details/78261383 1.压缩单个js文件 cnpm install uglify-js -g 安装 1& ...

随机推荐

  1. Contains DuplicateII

    超时版: /*Contains Duplicate II Given an array of integers and an integer k, find out whether there the ...

  2. Python第九章模块和包(2)

    1.如果文件下没有__init__.py文件,程序将不会认为这是一个Python的包. 2.如果要使用from 包  import  *  则需要 这样做. 是模块中包含 方法 的文件没有包含类: # ...

  3. elasticsearch从mysql导入数据

    详细:https://github.com/jprante/elasticsearch-jdbc(最下面有各数据库的导入方法说明) elasticsearch版本为1.5.2 1.下载 elastic ...

  4. Activity代码结构

    把一个Nova项目中典型的Activity代码结构简单归纳一下,保持代码风格的一致,有助于日常开发效率提升以及日后维护 Class Name     变量 constants   requests   ...

  5. 【Unity Shaders】学习笔记——SurfaceShader(五)让纹理动起来

    [Unity Shaders]学习笔记——SurfaceShader(五)让纹理动起来 转载请注明出处:http://www.cnblogs.com/-867259206/p/5611222.html ...

  6. Flash图表控件FusionCharts如何在图表中显示标识和图片

    在FusionCharts的图表中显示外部商标 使用FusionCharts之后,用户可以在运行时加载需要在图表中显示的外部标识/图片/图像.这个标识可以GIF / JPEG / PNG或SWF文件格 ...

  7. 【测试】并使用scott用户下的emp表写一条SQL语句,执行计划走唯一索引

    SQL; SAL ---------- Execution Plan ---------------------------------------------------------- ------ ...

  8. SQL模式匹配

    标准的SQL的模式匹配允许你使用“_”匹配任何单个字符,而“%”匹配任意数目字符(包括零个字符).在 MySQL中,SQL的模式缺省是忽略大小写的.下面显示一些例子.注意在你使用SQL模式时,你不能使 ...

  9. Compass是什么

    Compass是一个强大的Sass框架,他的设计目标是顺畅.搞笑地装扮互联网,使用它的人可以写出可维护性更高的样式表. Compass由三个主要部分组成:混混合器和实用工具类库,能够集成到应用开发环境 ...

  10. CLRS:Max_sunsequence_sum O(n*n) O(nlgn) O(n)

    #include<stdio.h>#include<stdlib.h>#include<time.h>#define ARRAY_SIZE 1000int buf ...