使用综合,代码压缩工具小结_javascript技巧_脚本
分类:pc28.am

UglifyJS UglifyJS是创设于nodeJS服务器端之上的二个代码压缩工具,近来jQuery使用它来收缩,压缩效果相比较好。

花色要透露时,由于javascript和css在支付时代码选拔了专门的学业的款式,举例有注释,縮进等,那样,这一个文件的朗朗上口超大,为了收缩网络流量,进步网页的下载速度,日常发布时必要对javascript和css进行消脂管理,压缩那么些文件的尺寸。Ajax Minifier正是如此的贰个工具。

Ajax Minifier下载地址

暗中认可安装在C:Program FilesMicrosoftMicrosoft Ajax Minifier 4 下,富含AjaxMin.exe AjaxMin.dll 和msbuild相关的有的内容

一向开发银行AjaxMinCommandPrompt.bat后,就能够在任何目录使用ajaxmin.exe

从ajaxmin.codeplex.com站点下载的代码中富含文档ajaxmin.doc[网址也可以有],里面有详细的参数表达。

jQuery 1.5 公布的时候 john resig 大神说所用的代码优化程序从谷歌Closure切换来UglifyJS,新工具的减弱效果特别好听。 UglifyJS 是四个服务端node.js的裁减程序。小编测验了风姿浪漫晃压缩率确实比较高。 所以值得写篇文章援引下。

GitHub主页:

压缩

你也得以品味一下在线版的Uglifyjs:

在线应用:

命令行方式

AjaxMin.exe那么些命令行文件能够扩充css和js的裁减

ajaxmin inputfile.css –out outputfile.css

ajaxmin inputfile.js –out outputfile.js

意气风发经你对 uglifyjs 风乐趣能够据守以下安装情势举办安装。

动用方式:

VS中项目并入

利用XML格局打开项目文件*. Csproj,在该公文的</project>前行入

  <Import Project="$(MSBuildExtensionsPath)MicrosoftMicrosoftAjaxAjaxMin.tasks" />
  <Target Name="AfterBuild">
    <ItemGroup>
      <JS Include="***.js" Exclude="***.min.js;" />
    </ItemGroup>
    <ItemGroup>
      <CSS Include="***.css" Exclude="***.min.css" />
    </ItemGroup>
    <Message Text="======== AjaxMin Begin========" />
  <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern=".js$" JsTargetExtension=".min.js" 

JSCollapseToLiteral="true" JSCombineDuplicateLiterals="true" JSLocalRenaming="CrunchAll" JSMacSafariQuirks="true" 

JSRemoveUnneededCode="true" JSStripDebugStatements="true" JSEvalTreatment="Ignore" JSInlineSafeStrings="true" />
    <AjaxMin CssSourceFiles="@(CSS)" CssSourceExtensionPattern=".css$" CssTargetExtension=".min.css" />
    <Message Text="======== AjaxMin Done!========" />
  </Target>

则编写翻译该类型时会自动把品种下全部的*.css和*.js文件全体更名称叫*.min.css *.min.js

末尾的版本只要引用min.css和min.js就能够。借使页面文件不更改,也可接收批管理

Ajaxmin.bat

@echo off

setlocal enabledelayedexpansion

for /r . %%f in (*.min.m.js) do (

set src=%%f

set dst=!src:.min.m.js=.js!

echo !src! !dst!

copy /y !src! !dst!

)

[纯属不要在开采目录下运作这些,不然把开垦的js文件都掩瞒了,在布局的目录下运作就能够]

  1. 安装 node.js 环境

  2. 进入 右上角 “Download” ZIP下载整个包。

  3. 解压展开 UglifyJS/bin/uglifyjs

  4. 找到

    global.sys = require(/^v0.[012]/.test(process.version) ? "sys" : "util");  var fs = require("fs");  var uglify = require("uglify-js"), // symlink ~/.node_libraries/uglify-js.js to ../uglify-js.js      jsp = uglify.parser,      pro = uglify.uglify;  

从 再从UglifyJS的GitHub主页下载它的摩登版本 复制node.exe到UglifyJS的bin目录 改正binuglifyjs,把require改成require,若是提醒找不到uglify-js的话 运营node uglifyjs –o fancyValidate.min.js fancyValidate.js

标准检查

和此外的语言相像,为了使javascript的编码适合规范,尚可工具举行自己斟酌。

jslint 这么些在线可以用

使用ajaxmin也可以

Ajaxmin.exe -ANALYZE –warn:4 demo.js

也可在VS中运用,具体铺排如下[VS Tools菜单,加多表面工具]

AjaxMin-Analyse

C:Program FilesMicrosoftMicrosoft Ajax Minifier 4AjaxMin.exe

-ANALYZE –warn:4 "$(ItemFileName)$(ItemExt)"

$(ItemDir)

图片 1

花色中大器晚成经采纳有个别js或css文件就可以深入分析,输出窗口展现有警告的行数

替换为

潜心要先钦赐-o参数,且-o参数后边紧跟的是减掉后的公文名,最终才是源文件。

还原

奇迹在调治已经压缩过的js文件或则供给深入分析原来就有的压缩过的js文件时,能够动用那个工具进行复原,那样规范化今后由于格式井井有条,就越来越好深入分析。

实际命令如下:

Ajaxmin.exe -pretty demo.min.js -clobber -o demo.js

global.sys = require(/^v0.[012]/.test(process.version) ? "sys" : "util");  var fs = require("fs");  require.paths.unshift(__dirname   "/../");  var uglify = require("index"),  jsp = uglify.parser,  pro = uglify.uglify; 

设若嫌下载麻烦的话,直接利用它的在线版本。Microsoft Ajax Minifier Microsoft Ajax 迷你fier是微软产物的代码压缩工具,帮忙JavaScript和css代码压缩。

其他

对于javascript,css代码标准检查和减少、还原互联网还会有超多此外的工具,ajaxmin能够和msbuild及VS集成,使用起来方便一些。以下一些仿照效法资料:

  1. cd 命令到 UglifyJS/bin/ 目录。施行 ./uglifyjs /你的js路线/xx.js 即便设置成功会把您的回退代码直接体现在命令行。你能够透过 ./uglifyjs 1.js 2.js 把收缩后的代码保存到 2.js

官方主页:

到现在 uglifyjs 安装完毕,作者还写了贰个PHP类。能够调用 uglifyjs 实行裁减

下载并设置,使用办法也很简短:ajaxmin fancyValidate.js–o fancyValidate.min.js

/*  # code by https://fengyin.name  # DEMO http://sweet.fengyin.name/  # Dual licensed under the MIT  */  $uglifyjs = new uglifyjs(array(   'node_home'=>'/usr/local/bin/node',   'uglifyjs_path'=>'/usr/UglifyJS/bin/uglifyjs', //uglifyjs压缩工具的路径。   // -------- 附加的参数 --------- //   'prefix'=>'-b', //输入的参数 -b 是格式化 不输入为压缩,还有更多请参考命令用法。   'append'=>''//保存文件,如果为空就是直接在命令行输出结果。   ));  $results =  $uglifyjs ->compress($_FILES['file']['tmp_name']);    class uglifyjs{          function __construct($options = array()) {              $this->options = $options;          }         function args($option) {              return $option['node_home'].' '.$option['uglifyjs_path'].' '.$option['prefix'].' '.$option['file'].' '.$option['append'];               }          function exec($cmd) {              exec($cmd.' 2>&1',$out, $status);              return json_encode(array(              'shell' => $cmd,                  'output' => implode("n",$out),                  'status' => $status              ));          }          function compress($file) {              $this->options['file'] = $file;              return $this->exec($this->args($this->options));          }      }  ?>  

越多的参数使用办法请看官方的印证文书档案:

作品最终附上 uglifyjs 的命令行中文表明

Google Closure Compiler

使用:

谷歌出品的代码压缩工具,须要JRE(从

那是一个剧本帮手(工具)-bin/uglifyjs-使用这么些库能够用来把二个本子压缩到细微。

官方主页:

简介:

先安装好JRE,轻易利用:java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

uglifyjs [ 选项... ] [ 文件 ]

越来越多的参数表明请占星关的文书档案:

文本参数应该放在选项前面,uglifyjs 会读取文件中的javascript代码进行拍卖。

YUI Compressor

假定您不点名输出的文件名,那么她会把拍卖后的内容输出到命令行中。

Yahoo!UI团队付加物的代码压缩工具,扶植JavaScript和css代码压缩,雷同也亟需JRE扶持。

例: uglifyjs 1.js 2.js 会创造三个 2.js 文本把 1.js管理完毕的原委输入到此地

官方主页:

例: uglifyjs 1.js 会读取1.js内容,并把结果输出到命令行中。

GitHub主页:

支撑的选项:

从 -jar yuicompressor-2.4.7.jar myfile.js -o** myfile-min.js

-b or --beautify — 参数 -b 或然 --beautify 用于美化(格式化)代码。美化从前会巨惠扣代码(未证实。)

越多参数的印证请看官方主页或

-i N or --indent N — 缩晋等第空格数

Packer

例:uglifyjs -b 1.js 2.js 会把1.js的情节格式后输出到2.js

着名的js大咖Dean Edwards写的压缩工具,压缩比率也相比较高。

-q or --quote-keys — quote keys in literal objects (by default, only keys that cannot be identifier names will be quotes).

官方主页:

-nm or --no-mangle — 变量名不减弱,意味着不会把代码的变量名裁减为 abcdefg

时间相比较持久,但照旧好用,也提供了无数参数设置。

-ns or --no-squeeze — 不使用ast_squeeze()(能够使各样优化现在的代码更加小,更具备可读性。)

JSMIN

-mt or --mangle-toplevel — mangle names in the toplevel scope too (by default we don’t do this).

与Packer大概时期,仅对注释、空白等进行减少。

--no-seqs — 当ast_squeeze()被调用的时候(除非您增多了--no-squeeze 参数才不会被调用)它将回退在三个代码块中再一次表明的行。比方:“a = 10; b = 20; foo();”将被重写为“a=10,b=20,foo();”。在各类地方,那将允许大家抛开代码块中的括号(在一些语句块产生一个单独的注明行之后)。那是暗许的,因为经大家测量检验,它就如更安全同有时候能省掉几百bytes,但增加--no-seqs 后将被明确命令防止。

官方主页:

--no-dead-code — 暗许景况下,UglifyJS将会去除代码中确定无法采访的讲话(如 return , throw , break 或许continue语句 ,以至部分不是函数/变量的的扬言)。通过这些选项能够禁止使用掉那些优化功能。

提供了三个DOS命令行版本:

-nc or --no-copyright — 暗中同意意况下,uglifyjs就要扭转的代码中保存初步的有的标识(尽管版权音讯等)。假使您设置这么些参数将被防止。

要来说之利用:jsmin <fancyValidate.js> fancyValidate.min.js

-o filename or --output filename — 将结果输出到叁个钦点文件名的文本中。若无这一个参数,结果将会被输出到命令行

结尾 就回顾介绍到此处,别的在开展减少在此之前最CANON够使用JSLint(

-

作者:囧月

-overwrite — 借使代码是从叁个文书中读取的(不是直接规范输入的)何况采纳了--overwrite参数,那么结果也将会被写进相近的文本中去。

--ast — pass this if you want to get the Abstract Syntax Tree instead of JavaScript as output. Useful for debugging or learning more about the internals.

--ast — pass 假如您要获取三个用来代替javascript输出的抽象语法树,这么些参数会在你进行调治或上学此中组件时很有用。

-v or --verbose — output some notes on STDERR (for now just how long each operation takes).

-v or --verbose — output 一些标准错误提醒(突显每一回开支多长期)

--extra — enable additional optimizations that have not yet been extensively tested. These might, or might not, break your code. If you find a bug using this option, please report a test case.

当您开采BUG时你能够扩充二个暂停点用来对还向来不根本的测量试验的代码进行优化,你能够使用那一个选项来生成三个测验用例。

--extra — enable

--unsafe — enable other additional optimizations that are known to be unsafe in some contrived situations, but could still be generally useful. For now only this:

foo.toString() ==> foo ””

想foo.toString() 这种用法 也是卓有作用的,不过存在部分人為的不安全的情事,这件事也亟需加上一些优化比如: foo ””

--max-line-len (default 32K characters) — add a newline after around 32K characters. I’ve seen both FF and Chrome croak when all the code was on a single line of around 670K. Pass –max-line-len 0 to disable this safety feature.

在当先大概32K字节的时候你要追加生龙活虎行,小编有察觉过在火狐和chorme下档代码朝气蓬勃行超越670K的时候它会发出报告急察方声。通过–max-line-len 0 去静止这些安全品质

--reserved-names — some libraries rely on certain names to be used, as pointed out in issue #92 and #81, so this option allow you to exclude such names from the mangler. For example, to keep names require and $super intact you’d specify –reserved-names “require,$super”.

--reserved-names — 些类库会信赖于特定的名号去选取,举个例子:#92 和#81 所以那个选项允许你去杀绝部分入眼字。

  1. 超强JavaScript编辑器 WebStorm 2.1 发布
  2. JavaScript跨域总括与化解办法
  3. 用JavaScript 达成表格数据管理
  4. 骇客考查:最流行JavaScript库是何许?
  5. JavaScript版两种广泛排序算法分享 

1.5 宣布的时候 john resig 大神说所用的代码优化程序从GoogleClosure切换来UglifyJS,新工具的减少效果拾分称心如意。 UglifyJS 是多个服务端...

本文由pc28.am发布于pc28.am,转载请注明出处:使用综合,代码压缩工具小结_javascript技巧_脚本

上一篇:JavaScript高端程序设计,javascript中的基本概念 下一篇:没有了
猜你喜欢
热门排行
精彩图文