Uglify js это что

Как уменьшть файлы CSS/JS (используя UglifyJS и UglifyCSS)¶

В этой статье в деталях показаны установка, конфигурация и использование UglifyJS. UglifyCSS работает практически так же, поэтому он обсуждается очень кратко.

Установите UglifyJS¶

Глобальная установка¶

Метод глобальной установки заставляет все ваши проекты использовать одну и ту же версию UglifyJS, что упрощает его содержание. Откройте вашу командную консоль и выполните следующую команду (вам может понадобиться запустить её от имени корневого пользователя):

Теперь вы можете выполнять комнаду uglifyjs глобально в любой части вашей системы:

Локальная установка¶

Рекомендуется, чтобы вы установили UglifyJS в вашей папке app/Resources и добавили папку node_modules в контроль версий. Как вариант, вы можете создать файл npm package.json и указать ваши зависимости в нём.

Сконфигурируйте фильтр uglifyjs2 ¶

Теперь нам нужно сконфигурировать Symfony, чтобы она использовала фильтр uglifyjs2 при обработке ваших JavaScript:

Это должно вывести папку в вашей системе, внутри которой вы должны найти выполняемый UglifyJS.

Теперь у вас есть доступ к фильтру uglifyjs2 в вашем приложении.

Сконфигурируйте бинарный node ¶

Assetic пытается найти бинарный узел автоматически. Если он не может быть найден, то вы можете сконфигурировать его локацию, используя ключ node :

Уменьшите ваши ресурсы¶

Для того, чтобы применить UglifyJS к вашим ресурсам, добавьте опцию filter в теги ресурсов ваших шаблонов, чтобы сказать Assetic использовать фильтр uglifyjs2 :

Вышеописанные пример предполагает, что у вас есть пакет под названием AppBundle и что ваши файлы JavaScript находятся в каталоге Resources/public/js под вашим пакетом. Однако вы можете включить ваши файлы JavaScript независимо от того, где они находятся.

С добавлением фильтра uglifyjs2 к тегам ресусров выше, вы теперь должны увидеть, как уменьшенные JavaScript намного быстрее бегут по проводам.

Источник

August 20, 2014

Как я уже упоминал ранее, Gulp имеет модульную структуру. Под Gulp, несмотря на молодость проекта, уже написано достаточное количество плагинов. Конечно, оно не сравниться с огромной коллекцией таковых под мега-популярный Grunt, но для большинства случаев жизни уже сейчас их хватит.

Устанавливаем gulp-uglify под Gulp

На странице плагина gulp-uglify описана команда установки этого плагина, которую мы повторим для себя, в своем проекте:

Создаем задачу gulp-uglify под Gulp

Открываем файл gulpfile.js в редакторе кода (у меня это Sublime Text) и вносим туда следующие строки:

В принципе, можно и не вводить вышеприведенные строки вручную, а просто скопировать их со страницы описания плагина gulp-uglify. Они размещены в блоке с заголовком Usage.

Вот мы и разобрали суть задачи в Gulp! Ведь ничего сложного, правда?!

Запускаем задачу gulp-uglify в Gulp

Вуаля! Видим (по аналогии с предыдушим опытом запуска дефолтной задачи), что именованная задача gulp-uglify успешно запустилась, выполнилась за 12 миллисекунд и также успешно завершилась. По идее, теперь по пути build/js у нас должен располагаться минифицированный js-файл (в моем случае это был jquery-1.11.1.js ).

Посмотрим и видим, что так оно и есть, файлик jquery-1.11.1.js помещен туда, куда мы и прописывали:

Полезные плагины под Gulp

Ниже я приведу примерный список наиболее полезных плагинов под Gulp, существующих на сегодняшний день:

Источник

Uglify js это что

Установка UglifyJS

UglifyJS представляет собой модуль Node.js. Поэтому вначале необходимо установить Node.js.

Пример установки для Ubuntu:

UglifyJS можно установить локально или глобально.

Глобальная установка

Глобальная установка позволяет всем Вашим проектам использовать одну версию UglifyJS, что упрощает его обслуживание. Установка производится следующей командой:

Теперь можно выполнять комнаду uglifyjs из любого места в системе.

Локальная установка

При использовании специфической версии UglifyJS, Вы можете установить UglifyJS внутри проекта. Для этого нужно указать путь установки и не указывать команду -g.

Рекомендуется устанавливать UglifyJS в папку app/Resources и добавить каталог node_modules в систему контроля версий.

После этого можно запустить uglifyjs команду из каталога node_modules:

Конфигурация uglifyjs2 фильтра

Для использования сжатия JavaScripts внутри Symfony проекта необходимо настроить uglifyjs2 фильтр

YAML

Путь расположения UglifyJS в разных системах может отличаться. Для того, чтобы узнать где npm хранит bin каталог, выполните команду:

Команда выведет каталог в Вашей системе, где можно найти исполнимый файл UglifyJS.

При локальной установке UglifyJS, Вы можете найти bin каталог внутри node_modules. В этом случае он будет называться .bin.

Теперь у Вас есть доступ к фильтру uglifyjs2 в Вашем проекте.

Конфигурация расположения Nodejs

Assetic пытается найти node автоматически. Вы также можете указать путь к node:

YAML

Применение фильтра для сжатия файлов

Если вы используете UglifyJS, добавьте параметр filter в asset тег Вашего шаблона. Таким образом вы укажете Assetic использовать uglifyjs2 фильтр:

Twig

Оба примера подразумевают, что у Вас есть бандл AppBundle и JavaScript файлы находятся в директории Resources/public/js Вашего бандла. В любом случае, Вы можете подключать файлы из разных мест.

С применением фильтра uglifyjs2 к asset тегам, Вы увидите сжатые JavaScripts файлы, которые будут загружаться значительно быстрее.

Выключение сжатия в режиме отладки

Сжатые JavaScripts файлы очень тяжело читать при отладке. Поэтому Assetic позволяет отключать фильтр в режиме отладки (использование app_dev.php). Вы можете включить отладку путем добавления вопросительного знака (?) перед именем фильтра. Это сообщит Assetic, что нужно включать сжатие, когда режим отладки выключен (используется app.php):

Twig

Попробовать сжатие можно, перевключившись в prod окружение. Но прежде не забудьте очистить кеш и сделать дамп файлов:

Установка, настройка и использование UglifyCSS

Использование UglifyCSS полностью такое же, как и UglifyJS. Вначале проверте, что пакет node установлен:

После этого добавьте конфигурацию:

YAML

Для сжатия CSS файлов добавьте Assetic stylesheets помощник:

Twig

Как и в случае с uglifyjs2 фильтром, если поставить вопросительный знак ? (т.е. ?uglifycss), сжатие будет только при выключенном режиме отладки.

Источник

JS Minify

Minify JS files

Meet JS Minify and Beautify, a simple online tool that does exactly what it says: minifies and beautifies JavaScripts quickly and easily. Minify your data without hassles or beautify it into a human-readable format.

Minify (also known as uglify), in computer science is the process of removing all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute. Minified source code is especially useful for interpreted languages and data interchange formats deployed and transmitted on the internet (such as JavaScript), because it reduces the amount of data that needs to be transferred.

A minified source code may be reversed using a beautify (also known as prettify) process, which applies various stylistic formatting conventions to it. These formatting conventions usually adjust positioning, spacing, and similar modifications intended to make the content easier for people to view, read, and understand.

Begin with the «type (or paste) here. » area to enter your data, then hit the «minify» or «beautify» buttons respectively. After a blink of any eye, the results will be shown below these buttons. Alternatively, use the «click (or tap) here. » area to select JS files from your device, then hit the corresponding button. Once the upload and processing completes, you will be notified to download the resulting minified/beautified JS file. That’s all!

All communications with our servers are made through secure SSL encrypted connections (https). Uploaded files are deleted from our servers immediately after being processed, and the resulting downloadable JS file is deleted right after the first download attempt, or 15 minutes of inactivity. We do not keep or inspect the contents of the entered data or uploaded files in any way. Read our privacy policy below for more details.

Источник

Uglify js это что

UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit.

First make sure you have installed the latest version of node.js (You may need to restart your computer after this step).

From NPM for use as a command line app:

From NPM for programmatic use:

Command line usage

UglifyJS can take multiple input files. It’s recommended that you pass the input files first, then pass the options. UglifyJS will parse input files in sequence and apply any compression options. The files are parsed in the same global scope, that is, a reference from a file to some variable/function declared in another file will be matched properly.

If no input file is specified, UglifyJS will read from STDIN.

If you wish to pass your options before the input files, separate the two with a double dash to prevent input files being used as option arguments:

Command line options

CLI source map options

—source-map «filename=’ ‘» to specify the name of the source map. The value of filename is only used to set file attribute (see the spec) in source map file.

—source-map «root=’ ‘» to pass the URL where the original files can be found.

—source-map «names=false» to omit symbol names if you want to reduce size of the source map file.

—source-map «url=’ ‘» to specify the URL where the source map can be found. Otherwise UglifyJS assumes HTTP X-SourceMap is being used and will omit the //# sourceMappingURL= directive.

Composed source map

When you’re compressing JS code that was output by a compiler such as CoffeeScript, mapping to the JS code won’t be too helpful. Instead, you’d like to map back to the original code (i.e. CoffeeScript). UglifyJS has an option to take an input source map. Assuming you have a mapping from CoffeeScript → compiled JS, UglifyJS can generate a map from CoffeeScript → compressed JS by mapping every token in the compiled JS to its original location.

CLI compress options

CLI mangle options

eval (default: false ) — mangle names visible in scopes where eval or with are used.

Mangle all properties (except for JavaScript builtins ):

Mangle all properties except for reserved properties:

Mangle all properties matching a regex :

Combining mangle properties options:

Now, part1.js and part2.js will be consistent with each other in terms of mangled property names.

Using the name cache is not necessary if you compress all your files in a single call to UglifyJS.

Using quoted property name ( o[«foo»] ) reserves the property name ( foo ) so that it is not mangled throughout the entire script even when used in an unquoted style ( o.foo ). Example:

Debugging property name mangling

Assuming installation via NPM, you can load UglifyJS in your application like this:

You can minify more than one JavaScript file at a time by using an object for the first argument where the keys are file names and the values are source code:

The toplevel option:

The nameCache option:

You may persist the name cache to the file system in the following way:

An example of a combination of minify() options:

To produce warnings:

compress (default: <> ) — pass false to skip compressing entirely. Pass an object to specify custom compress options.

ie (default: false ) — enable workarounds for Internet Explorer bugs.

mangle (default: true ) — pass false to skip mangling names, or pass an object to specify mangle options (see below).

output (default: null ) — pass an object if you wish to specify additional output options. The defaults are optimized for best compression.

parse (default: <> ) — pass an object if you wish to specify some additional parse options.

sourceMap (default: false ) — pass an object if you wish to specify source map options.

toplevel (default: false ) — set to true if you wish to enable top level variable and function name mangling and to drop unused variables and functions.

v8 (default: false ) — enable workarounds for Chrome & Node.js bugs.

Minify options structure

Source map options

To generate a source map:

You can set option sourceMap.url to be «inline» and source map will be appended to code.

You can also specify sourceRoot property to be included in source map:

If you’re compressing compiled JavaScript and have a source map for it, you can use sourceMap.content :

If you wish to reduce file size of the source map, set option sourceMap.names to be false and all symbol names will be omitted.

bare_returns (default: false ) — support top level return statements

html5_comments (default: true )

shebang (default: true ) — support #!command as the first line

annotations (default: true ) — Pass false to disable potentially dropping functions marked as «pure». A function call is marked as «pure» if a comment annotation /*@__PURE__*/ or /*#__PURE__*/ immediately precedes the call. For example: /*@__PURE__*/foo();

arguments (default: true ) — replace arguments[index] with function parameter name whenever possible.

arrows (default: true ) — apply optimizations to arrow functions

assignments (default: true ) — apply optimizations to assignment expressions

awaits (default: true ) — apply optimizations to await expressions

collapse_vars (default: true ) — Collapse single-use non-constant variables, side effects permitting.

dead_code (default: true ) — remove unreachable code

default_values (default: true ) — drop overshadowed default values

directives (default: true ) — remove redundant or non-standard directives

drop_console (default: false ) — Pass true to discard calls to console.* functions. If you wish to drop a specific function call such as console.info and/or retain side effects from function arguments after dropping the function call then use pure_funcs instead.

drop_debugger (default: true ) — remove debugger; statements

evaluate (default: true ) — Evaluate expression for shorter constant representation. Pass «eager» to always replace function calls whenever possible, or a positive integer to specify an upper bound for each individual evaluation in number of characters.

functions (default: true ) — convert declarations from var to function whenever possible.

hoist_exports (default: true ) — hoist export statements to facilitate various compress and mangle optimizations.

hoist_funs (default: false ) — hoist function declarations

hoist_vars (default: false ) — hoist var declarations (this is false by default because it seems to increase the size of the output in general)

if_return (default: true ) — optimizations for if/return and if/continue

imports (default: true ) — drop unreferenced import symbols when used with unused

inline (default: true ) — inline calls to function with simple/ return statement:

join_vars (default: true ) — join consecutive var statements

merge_vars (default: true ) — combine and reuse variables.

negate_iife (default: true ) — negate «Immediately-Called Function Expressions» where the return value is discarded, to avoid the parens that the code generator would insert.

objects (default: true ) — compact duplicate keys in object literals.

passes (default: 1 ) — The maximum number of times to run compress. In some cases more than one pass leads to further compressed code. Keep in mind more passes will take more time.

properties (default: true ) — rewrite property access using the dot notation, for example foo[«bar»] → foo.bar

reduce_funcs (default: true ) — Allows single-use functions to be inlined as function expressions when permissible allowing further optimization. Enabled by default. Option depends on reduce_vars being enabled. Some code runs faster in the Chrome V8 engine if this option is disabled. Does not negatively impact other major browsers.

reduce_vars (default: true ) — Improve optimization on variables assigned with and used as constant values.

rests (default: true ) — apply optimizations to rest parameters

side_effects (default: true ) — drop extraneous code which does not affect outcome of runtime execution.

spreads (default: true ) — flatten spread expressions.

strings (default: true ) — compact string concatenations.

switches (default: true ) — de-duplicate and remove unreachable switch branches

top_retain (default: null ) — prevent specific toplevel functions and variables from unused removal (can be array, comma-separated, RegExp or function. Implies toplevel )

toplevel (default: false ) — drop unreferenced functions ( «funcs» ) and/or variables ( «vars» ) in the top level scope ( false by default, true to drop both unreferenced functions and variables)

typeofs (default: true ) — compress typeof expressions, e.g. typeof foo == «undefined» → void 0 === foo

unsafe (default: false ) — apply «unsafe» transformations (discussion below)

unsafe_Function (default: false ) — compress and mangle Function(args, code) when both args and code are string literals.

unsafe_proto (default: false ) — optimize expressions like Array.prototype.slice.call(a) into [].slice.call(a)

unsafe_regexp (default: false ) — enable substitutions of variables with RegExp values the same way as if they are constants.

unsafe_undefined (default: false ) — substitute void 0 if there is a variable named undefined in scope (variable name will be mangled, typically reduced to a single character)

unused (default: true ) — drop unreferenced functions and variables (simple direct variable assignments do not count as references unless set to «keep_assign» )

varify (default: true ) — convert block-scoped declaractions into var whenever safe to do so

yields (default: true ) — apply optimizations to yield expressions

eval (default: false ) — Pass true to mangle names visible in scopes where eval or with are used.

toplevel (default: false ) — Pass true to mangle names declared in the top level scope.

Mangle properties options

builtins (default: false ) — Use true to allow the mangling of builtin DOM properties. Not recommended to override this setting.

debug (default: false ) — Mangle names with the original name still present. Pass an empty string «» to enable, or a non-empty string to set the debug suffix.

keep_quoted (default: false ) — Only mangle unquoted property names.

regex (default: null ) — Pass a RegExp literal to only mangle property names matching the regular expression.

reserved (default: [] ) — Do not mangle property names listed in the reserved array.

ascii_only (default: false ) — escape Unicode characters in strings and regexps (affects directives with non-ascii characters becoming invalid)

galio (default: false ) — enable workarounds for ANT Galio bugs

indent_level (default: 4 )

indent_start (default: 0 ) — prefix all lines by that many spaces

inline_script (default: true ) — escape HTML comments and the slash in occurrences of in strings

keep_quoted_props (default: false ) — when turned on, prevents stripping quotes from property names in object literals.

max_line_len (default: false ) — maximum line length (for uglified code)

preamble (default: null ) — when passed it must be a string and it will be prepended to the output literally. The source map will adjust for this text. Can be used to insert a comment containing licensing information, for example.

preserve_line (default: false ) — pass true to retain line numbering on a best effort basis.

quote_keys (default: false ) — pass true to quote all keys in literal objects

quote_style (default: 0 ) — preferred quote style for strings (affects quoted property names and directives as well):

semicolons (default: true ) — separate statements with semicolons. If you pass false then whenever possible we will use a newline instead of a semicolon, leading to more readable output of uglified code (size before gzip could be smaller; size after gzip insignificantly larger).

shebang (default: true ) — preserve shebang #! in preamble (bash scripts)

width (default: 80 ) — only takes effect when beautification is on, this specifies an (orientative) line width that the beautifier will try to obey. It refers to the width of the line text (excluding indentation). It doesn’t work very well currently, but it does make the code generated by UglifyJS more readable.

wrap_iife (default: false ) — pass true to wrap immediately invoked function expressions. See #640 for more details.

Keeping copyright notices or other comments

Note, however, that there might be situations where comments are lost. For example:

Even though it has «@preserve», the comment will be lost because the inner function g (which is the AST node to which the comment is attached to) is discarded by the compressor as not referenced.

The safest comments where to place copyright information (or other info that needs to be kept in the output) are comments attached to toplevel nodes.

The unsafe compress option

It enables some transformations that might break code logic in certain contrived cases, but should be fine for most code. You might want to try it on your own code, it should reduce the minified size. Here’s what happens when this flag is on:

UglifyJS will warn about the condition being always false and about dropping unreachable code; for now there is no option to turn off only this specific warning, you can pass warnings=false to turn off all warnings.

Another way of doing that is to declare your globals as constants in a separate file and include it into the build. For example you can have a build/defines.js file with the following:

and build your code like this:

Conditional compilation API

You can also use conditional compilation via the programmatic API. With the difference that the property name is global_defs and is a compressor property:

To replace an identifier with an arbitrary non-constant expression it is necessary to prefix the global_defs key with «@» to instruct UglifyJS to parse the value as an expression:

Otherwise it would be replaced as string literal:

Using native Uglify AST with minify()

Working with Uglify AST

Transversal and transformation of the native AST can be performed through TreeWalker and TreeTransformer respectively.

ESTree / SpiderMonkey AST

UglifyJS has its own abstract syntax tree format; for practical reasons we can’t easily change to using the SpiderMonkey AST internally. However, UglifyJS now has a converter which can import a SpiderMonkey AST.

For example Acorn is a super-fast parser that produces a SpiderMonkey AST. It has a small CLI utility that parses one file and dumps the AST in JSON on the standard output. To use UglifyJS to mangle and compress that:

Use Acorn for parsing

Acorn is really fast (e.g. 250ms instead of 380ms on some 650K code), but converting the SpiderMonkey tree that Acorn produces takes another 150ms so in total it’s a bit more than just using UglifyJS’s own parser.

Uglify Fast Minify Mode

To enable fast minify mode from the CLI use:

To enable fast minify mode with the API use:

Source maps and debugging

To allow for better optimizations, the compiler makes various assumptions:

About

JavaScript parser / mangler / compressor / beautifier toolkit

Источник