You need to enable JavaScript to use this website.
Choosing the correct Code Type makes the compression of your code more safe and effective. Choosing the wrong option may lead to fewer optimizations or errors.
There are 3 main groups,
x/html,
CSS and
JavaScript.
Select
JavaScript when you want to compress just JavaScript code, as it would appear in an external.js file. If your JavaScript code contains PHP, ASP or Smarty server side code then select the respective option. This will allow you to minimize your JavaScript code containing PHP, ASP or Smarty without getting syntax errors, while preserving your server side code intact.
note:
JavaScript code contained between <script> and </script> tags is considered x/html with embedded JavaScript code. Select a x/html code type in such case.
Select
CSS when you want to compress just Cascading Style Sheets (CSS) code as it would appear in an external style.css file. To compress your CSS containing PHP, ASP or Smarty code select the respective option.
note:
CSS code contained between <style> and </style> tags is considered x/html with embedded CSS code. Select a x/html code type in such case.
Select
x/html for web documents that do not contain server side code, such as static web pages.
Select
x/html + PHP if you want to compress x/html containing PHP code. This will ensure that your PHP code remains intact while your x/html code gets minimized. With this option you can safely minimize the x/html code of a
Wordpress theme, a
Joomla template, a
Drupal template or any other PHP based template. Only the following tags are considered valid open and close tags:
<?,
<?=,
<?php and
?>.
Select
x/html + ASP if you want to compress x/html containing ASP code. Note that ASP code support is simply limited to preserving anything between
<% and
%> tags.
Select
x/html + Smarty if you want to compress
Smarty templates code, or any other template system with similar syntax to smarty. Only the following tags are considered valid open and close tags:
{ and
}, and they can contain any number of nested tags.
When reading files using
HTML5 ReadFile API, use the specified
charset encoding to render the characters of the dropped file correctly.
Unfortunately ReadAsText() method does not autodetect the encoding of the files properly, so if you see weird characters appearing in your document, or the text is incomplete, choose an appropriate charset value. Most of the times you'll be good using
ISO-8859-1 or
UTF-8, but depending of the language you use in your documents, that needs to be changed.
How to find out:
You can determine which character encoding a certain file uses by opening that file in your browser. For example using FireFox, drop the file in a new tab. If the file displays the characters correctly, check the menu View / Character Encoding and write down the one that is selected.
If the characters appear wrong in FireFox, try selecting a different Character Encoding in the same menu until you find the one that displays your file correctly.
Compresses smarty templates while preserving
smarty code functionality.
Please note that HTMLCompressor uses a custom lightweight smarty parsing engine, and only "
{" and "
}" tag delimiters are supported.
Ignores smarty open / close delimiters if they are surrounded by a whitespace character. A whitespace character after "
{" or a whitespace character before "
}".
For more information read the official smarty documentation about
escaping smarty parsing.
Preserves code between
<% and
%> tags.
Please note that
ASP support is quite basic and limited only to preserving anything between the mentioned tags.
before:
<div>
<p>Today is a <%
randomize()
r=rnd()
if r>0.5 then
response.write("nice")
else
response.write("horrible")
end if
%> day!</p>
</div>
after: (code type: x/html)
<div>
<p>Today is a <% randomize() r=rnd() if r>0.5 then
response.write("nice")
else
response.write("horrible")
end if
%> day!</p>
</div>
after: (code type: x/html+ASP)
<div>
<p>Today is a <%
randomize()
r=rnd()
if r>0.5 then
response.write("nice")
else
response.write("horrible")
end if
%> day!</p>
</div>
Minimizes PHP code by removing unnecessary white spaces and line breaks, while preserving the functionality of
PHP code.
However minimizing PHP code itself does not affect the size of the output to the browser, it can be very handy when you are mixing small code snippets within x/html templates, as you will get most of the times a single line of PHP code which makes is easier to integrate in your x/html.
It is also useful to save disk space for integrated systems with a limited storage capacity, convert it for command line usage, and anywhere where you see fit.
note:
String content is always preserved, so multiline strings, heredoc and nowdoc are always kept intact.
before:
<?php
if ( $user->is_new )
{
echo 'Hello new user!';
} else {
echo 'Welcome back user';
}
?>after:
<?php if($user->is_new){echo 'Hello new user!';}else{echo 'Welcome back user';}?> Converts PHP Short Open Tag "
<?" and Short Open Tag with echo "
<?=" to full Open Tag format "
<?php" and "
<?php echo" respectively.
before:
Welcome <? if($user->returning) echo "back"; ?> dear <?=$user->name; ?>
after:
Welcome <?php if($user->returning) echo "back"; ?> dear <?php echo $user->name; ?>
Currently there are 4 compression levels.
Do not minimize
The compression in this level respects the x/html document layout, while still allows to remove comments (preserving conditional comments), and compress CSS and JavaScript code.
Safe minimization
This is the default level and is meant to reduce the size of your code as much as possible while preserving the layout representation.
Advanced minimization
This does all of the above, plus tries to save some more bytes by removing whitespace characters between block elements. Whilst most of the time this won't alter the layout of x/html code, it is very possible that any of the block elements is set to be inline with CSS, then there would be a lack for one whitespace where otherwise may be needed. Read further for a simple solution.
Aggressive minimization
This level does all of the above plus removes any whitespace character between x/html tags, while still preserving
textarea and
pre contents unaltered. In this level the resulting layout can get affected if the design relies in intertag whitespaces (whitespaces between a close tag and an open tag). See the given examples below for a graphical explanation and a simple solution.
before:
<!-- Minimization Levels Test -->
<style type = "text/css">
p {
font-size: 12px;
font-weight: bold;
}
</style>
<div style = "background: #ff0000;">
<div>Some</div>
<div>text</div>
<div>
<span>More</span>
<span>text</span>
</div>
</div>
<script type = "text/JavaScript">
alert ( "hello!" );
</script>
after: (Do not minimize)
<style type = "text/css">p{font-size:12px;font-weight:bold}</style>
<div style = "background: #ff0000;">
<div>Some</div>
<div>text</div>
<div>
<span>More</span>
<span>text</span>
</div>
</div>
<script type = "text/JavaScript">alert("hello!");</script>
after: (Safe)
<style type="text/css">p{font-size:12px;font-weight:bold}</style>
<div style="background:#f00">
<div>Some</div>
<div>text</div>
<div>
<span>More</span>
<span>text</span>
</div>
</div>
<script type="text/JavaScript">alert("hello!");</script>
after: (Advanced)
<style type="text/css">p{font-size:12px;font-weight:bold}</style><div style="background:#f00"><div>Some</div><div>text</div><div>
<span>More</span>
<span>text</span></div></div>
<script type="text/JavaScript">alert("hello!");</script>
Look at the tags "
<div>Some</div><div>text</div>" and notice how the newline character that was between "
<div>Some</div>" and "
<div>text</div>" has been removed.
This is not a problem as long as this div display style is
block, "
Some" and "
text" would continue to render in a separate line, one on top of another. However if these div display style were
inline, what would render as "
Some text" with the newline character between them, would turn into "
Sometext" without it. For a simple workaround, check next example.
after: (Aggressive)
<style type="text/css">p{font-size:12px;font-weight:bold}</style><div style="background:#f00"><div>Some</div><div>text</div><div><span>More</span><span>text</span></div></div><script type="text/JavaScript">alert("hello!");</script>
In aggressive level all whitespace characters between x/html tags are removed, resulting in a single line output (as long as there are no textarea or pre tags with multiline content, which is preserved). This produces in some circumstances a change in the layout of the page, where the page design relies on such spaces.
Notice here what happened with "
<span>More</span><span>text</span>". Before compression there was a newline character between "
<span>More</span>" and "
<span>text</span>", so with the original code, this text would render as "
More text", however after aggressive compression, it would read as "
Moretext" because the newline character that was between them is no longer present.
The solution:
To ensure that the layout does not change after compression with Advanced / Aggressive compression levels put your desired space inside the x/html tag, or use an explicit .
Space inside x/html is always preserved:
<span>More </span><span>Text</span>
Explicit x/html space entity:
<span>More</span> <span>Text</span>
Replaces new line characters from output with one space. This ensures that the layout is preserved, yet provides one line of code output which is handy in many situations.
before:
<div>Hello</div>
<div>Goodbye</div>
after:
<div>Hello</div> <div>Goodbye</div>
In aggressive compression level, new lines between html tags are always discarded, so the previous code would look like this:
code:
<div>Hello</div><div>Goodbye</div>
Prevents removing quotes from attribute values in document types that support this feature.
before:
<!doctype html>
<a href = "http://example.com/"> Go to website. </a>
after: (option selected)
<!doctype html>
<a href="http://example.com/"> Go to website. </a>
after: (option NOT selected)
<!doctype html>
<a href=http://example.com/> Go to website. </a>
HTML compressor checks for a DOCTYPE declaration and automatically removes the quotes of attributes for HTML5 documents based on the current
html5 attributes syntax specification. If you don't want this behavior, check this option.
note:
More document types that support attribute values without quotes will be considered in the near future.
Removes quotes regardless of DOCTYPE not being present, in base of HTML5 rules.
Check this option if you are compressing bits of html code that do not have a DOCTYPE declaration and you want to remove the quotes of attribute values.
before:
<a href="site.com" id="site-link" onclick="return false;" class=""> Go nowhere </a>
after: (option selected)
<a href=site.com id=site-link onclick="return false" class> Go nowhere </a>
after: (option not selected)
<a href="site.com" id="site-link" onclick="return false" class=""> Go nowhere </a>
By default the compressor checks for a DOCTYPE declaration and automatically removes the quotes of attributes for HTML5 documents based on the current
html5 attributes syntax specification.
note:
This option is meant for documents without doctype declaration. If the document has a doctype declaration that falls under xml specification, quotes won't get removed.
Removes any leading and trailing new line characters from the compressed code in Safe Minimization Level for PHP, ASP and Smarty.
By default we make the best effort to preserve the original document layout after compression, and because of that, PHP, ASP and SMARTY code preserves a leading / trailing new line character if present in the Source code. This is desirable when the code is part of a template system and the design layout relies in those new line characters (however is a bad practice), in order to present the final output.
Consider the following basic php templates.
header.php:
<span>Name:</span>
body.php:
<?php echo "Mike"; ?>
output:
Name: Mike
In this example the dark boxes (
) represent the absolute start and end of the file, and the pink boxes (
) represent the new line character. Notice how the output has a white space between "Name:" and "Mike". However if we compress "body.php" template with this option checked, or an html compression level higher than Safe Minimization, the following happens:
body.php:
<?php echo "Mike" ?>
output:
Name:Mike
Here the white space between "Name:" and "Mike" has vanished, generating a different output from the original uncompressed php template.
I would say that 95% of the times you will find templates that do not reply on such character, so this option is here for that reason.
If the compressor engine cannot determine the document type and the inline JavaScript or CSS code contains
< or
& characters, we enclose the code between
/*<![CDATA[*/ and
/*]]>*/ tags.
Having this option checked tells the compressor engine that the document is not xml (and this includes xhtml), so CDATA enclosing is not necessary.
before:
<head>
<script>
if (2 < 3) alert("Hi!");
</script>
</head>after: Option not checked. (Default)
<head>
<script>/*<![CDATA[*/if(2<3){alert("Hi!")};/*]]>*/</script>
</head>after: Option checked.
<head>
<script>if(2<3){alert("Hi!")};</script>
</head> The script treats the document as XML if a
XHTML DOCTYPE declaration, a
XML Declaration or an
<html> tag containing a
xmlns attribute is found,
anywhere in your document.
Now notice the same code with a xhtml document type declaration:
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<script>
if (2 < 3) alert("Hi!");
</script>
</head>after: Option checked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<script>/*<![CDATA[*/if(2<3){alert("Hi!")};/*]]>*/</script>
</head>note 1:
CDATA sections are always added to CSS and JavaScript code containing S.S.C. (Server Side Code) if document type is XML.
This is because the characters that can appear in such code are dynamically generated and could potentially contain non valid XML characters.
For more info, read
Properly Using CSS and JavaScript in XHTML Documents.
Minimizes the JavaScript code contained inside html tag attribute events.
before:
<img onload="alert ( 'Image loaded!' );" />
after:
<img onload="alert('Image loaded!')" /> Minimizes the JavaScript code contained inside HREF attribute of anchor elements with the javascript: protocol.
before:
<a href="javascript:alert ( 'Link clicked' );">Click me</a>
after:
<a href="javascript:alert('Link clicked')">Click me</a> For more info read
JavaScript URIs at MDC.
Minimizes the CSS code contained inside STYLE attribute of html elements.
before:
<p style="color: #ff0000; padding: 19px;"> ... </p>
after:
<p style="color:#f00;padding:19px"> ... </p>
Minimizes the
JavaScript code contained between
<script> and
</script> tags.
Only scripts which are JavaScript according to
RFC 4329 and those that don't have a
type or
language attribute set, are sent to the JavaScript compressor engine. If the document contains a
default scripting language meta tag, it is considered. This way we avoid sending to the engine other languages such as vbscript, tcl or other implementations such as x-jquery-tmpl.
before:
<script type="text/JavaScript">
// Basic welcome script...
function welcome( username ) {
alert ( "Welcome to our site " + username );
}
welcome ( "Mr. Smith" );
</script>
after:
<script type="text/JavaScript">function welcome(a){alert("Welcome to our site "+a)}welcome("Mr. Smith");</script>
Comment preservation
By default all comments are removed from the JavaScript code. If we want to preserve some comments, such as copyright info, credits, etc, we can use the important comment syntax for YUI Compressor and JSMin engines, and the
@license or
@preserve JSDoc tags with Closure Compiler engine. See the following illustrative examples.
before:
<script type="text/JavaScript">
/*! Some important info here... */
alert ("welcome!");
</script>
after: (YUI Compressor / JSMin)
<script type="text/JavaScript">/*! Some important info here... */
alert("welcome!");</script>
after: (Closure Compiler)
<script type="text/JavaScript">alert("welcome!");</script>
note 1:
The syntax for important comments is: /*! comment here... */. The contents of those comments are preserved, including new line characters. This syntax is valid for CSS, PHP and JavaScript (With the exception of Closure Compiler).
As you can see, Closure Compiler removed the comment in the previous example, as it does not understand the important comment syntax.
Now let's see the JSDoc tags that Closure Compiler uses to preserve important comments.
before:
<script type="text/JavaScript">
/**
* @preserve Copyright message here.
* The text here can span into several lines, and the asterisks
* will be removed after the compression.
*/
alert ("welcome!");
</script>
after: (YUI Compressor / JSMin)
<script type="text/JavaScript">alert("welcome!");</script>
after: (Closure Compiler)
<script type="text/JavaScript">/*
Copyright message here.
The text here can span into several lines, and the asterisks
will be removed after the compression.
*/
alert("welcome!");</script>
note 2:
The JSDoc tags to preserve comments are
@license and
@preserve. There is no difference between them, and whenever you can use them multiple times inside your source code, Closure Compiler will put them on top of the resulting javascript code as a single comment.
/**
* @preserve Text to preserve here.
* This text can span several lines...
*/
For more information about all the JSDoc tags that Closure Compiler supports, check
Annotating JavaScript for the Closure Compiler.
tip 1: PHP, ASP, Smarty!
If your JavaScript code contains Server Side Code, such as PHP, ASP or Smarty, then select the appropriate Code Type. For x/html documents with inline JavaScript (code contained between <script> ... </script>), choose x/html+PHP, x/html+ASP or x/html+Smarty, otherwise the JavaScript compressor engine will failt to compress your code.
tip 2: External JavaScript files
If you want to compress a standalone .js file, then choose JavaScript from the Code Type dropdown, and if your standalone .js file contains Server Side Code, choose JavaScript+PHP, JavaScript+ASP or JavaScript+Smarty accordingly.
Minimizes the
JavaScript code contained between
<script> and
</script> tags mixed with Server Side Code.
This is a unique feature of our HTML Compressor, that allows you to compress JavaScript code that otherwise would not be possible due to the fact that is contains Server Side Code (
S.S.C. for short), such as PHP, ASP or Smarty, and that would produce syntax errors as the JavaScript compressor engine does not understand any other language than JavaScript.
Whenever the our engine will digest most of the JavaScript code mixed with S.S.C., there are some limitations and best practices to get things going smooth. By default we use YUI Compressor with a failback to JSMin.
Minimizes the
CSS code contained between
<style> and
</style> tags.
before:
<style type="text/css">
/*! Important comment, such as copyright notice, etc */
p {
padding: 10px 0px;
background-color: #ccaacc; /* standard comment */
}
</style>
after:
<style type="text/css">/*<![CDATA[*//*! Important comment, such as copyright notice, etc */p{padding:10px 0;background-color:#cac}/*]]>*/</style>
Notice that comments that are immediately followed by an exclamation sign are considered important, so they are not removed from the code. Standard comments are removed, however most
css hacks involving comments are supported.
note 1:
The syntax for important comments is: /*! comment here... */. That's the same for CSS, PHP, Smarty and JavaScript (With the exception of Closure Compiler).
tip 1:
If you want to compress standalone CSS code (code not enclosed in <style> ... </style> tags), such as the contents of a style.css file, select "CSS" from the Code type drop-down.
Let's have a look at some practical examples to illustrate how the final results change when we choose different "
Code Type" options, with the following basic CSS code:
before:
span {
color: #FF0000;
padding: 0px 0px 0px 0px;
margin: 0px;
}after: (Code type: x/html)
span {
color: #FF0000;
padding: 0px 0px 0px 0px;
margin: 0px;
}after: (Code type: CSS)
span{color:#f00;padding:0;margin:0} Now let's put our CSS code between
<style> and
</style> tags.
Before: (CSS code enclosed in <style>)
<style>
span {
color: #FF0000;
padding: 0px 0px 0px 0px;
margin: 0px;
}
</style>after: (Code type: x/html)
<style>span{color:#f00;padding:0;margin:0}</style> As you can see, the CSS code gets properly minimized when Code Type is set to x/html (or x/html + XXX) and it is enclosed within STYLE tags.
tip 2: PHP, ASP, Smarty!
If your CSS code contains Server Side Code, such as PHP, ASP or Smarty, you need to enclose the code with <style> ... </style> tags and select the appropriate document type, such as "x/html+PHP" if your CSS code is mixed with PHP, or "x/html+Smarty" if your code is mixed with smarty template tags.
UPDATE!
Now you can compress standalone CSS code containing Server Side Code by selecting the appropriate Code Type, such as CSS+PHP, CSS+ASP or CSS+Smarty. Below are some practical examples to illustrate what happens when we have CSS code mixed with PHP, and the different results that we obtain based on the Code Type that we choose.
before:
span {
color: #FF0000;
padding: 0px 0px 0px 0px;
margin: 0px;
<?php
if ($something == true)
{
echo "background-color: red;";
}
?>
}after: (Code type: x/html)
span {
color: #FF0000;
padding: 0px 0px 0px 0px;
margin: 0px;
<?php if ($something==true) { echo "background-color: red;"; } ?>
}after: (Code type: CSS)
span{color:#f00;padding:0;margin:0;<?php if($something == true){echo "background-color: red;"}?>} Now let's put our code within STYLE tags...
Before: (enclosed in STYLE)
<style>
span {
color: #FF0000;
padding: 0px 0px 0px 0px;
margin: 0px;
<?php
if ($something == true)
{
echo "background-color: red;";
}
?>
}
</style>after: (Code type: x/html + PHP)
<style>/*<![CDATA[*/span{color:#f00;padding:0;margin:0;<?php
if ($something == true)
{
echo "background-color: red;";
}
?>
}/*]]>*/</style> As we can see here, choosing the right Code Type ensures that our PHP, ASP or Smarty code does not get altered, while we are still able to minimize the surrounding CSS code.
Adds a newline character after the specified column number.
before:
p {
color: #ff0000;
padding: 10px 0px;
}
span {
font-weight: bold;
}
#content {
float: left;
width: 600px;
}
By default (no value specified), CSS compression creates a single line output.
after: (default)
p{color:#f00;padding:10px 0}span{font-weight:bold}#content{float:left;width:600px} Use 0 (zero) as the column number to add a new line character after every rule declaration block.
after: (0)
p{color:#f00;padding:10px 0}
span{font-weight:bold}
#content{float:left;width:600px}
Specifying a higher value (1 - 9999), the compressor will add a new line character at the end of a rule declaration block immediately after the given column number.
after: (30)
p{color:#f00;padding:10px 0}span{font-weight:bold}
#content{float:left;width:600px}
tip:
A good value to specify for standalone css files (style.css files), is 500.
Keeps
SSI directives found in the code.
before:
<!-- Show this document's last modification time -->
<p> Last modified on: <!--#set var="modified" value="$LAST_MODIFIED" --> </p>
after:
<p> Last modified on: <!--#set var="modified" value="$LAST_MODIFIED" --> </p>
Use this to preserve comments which opening tag is followed immediately by the specified character. This allows you to keep important comments that you don't want to get removed on compression.
before:
<!--@ Copyright SiteName.com -->
<h3> Latest News </h3>
<!-- End of header -->
By default (no value specified), all comments are removed.
after:
<h3> Latest News </h3>
If we use "@" as the key character we keep the comments that we want.
after: (@)
<!--@ Copyright SiteName.com --><h3> Latest News </h3>
tip:
You can use any character that you like, which is useful if you are trying to compress a document with a custom template system based in SGML comments.
When this option is selected, local symbols are not minimized.
Check this option if your server side code output variable names in the local scope. Ideally you would make your server side code to output just values, instead of variable names, so you can take advantadge of local scope variable renaming (munging), and save some more bytes.
before:
function greet(name) {
var site = '';
<?php
// For this example, let's assume that
// we got an empty $siteName...
$siteName = getSiteFromSomewhere();
if ( empty($siteName) )
{
$siteName = 'default-website.com';
}
echo 'site="'.$siteName.'";';
?>
alert ( name + ", welcome to " + site );
}
after:
function greet(b){var a="";<?php
// For this example, let's assume that
// we got an empty $siteName...
$siteName = getSiteFromSomewhere();
if ( empty($siteName) )
{
$siteName = 'default-website.com';
}
echo 'site="'.$siteName.'";';
?>alert(b+", welcome to "+a)};
after client-side:
function greet(b){var a="";site="default-website.com";alert(b+", welcome to "+a)}; Here we can see how the JavaScript local variable
site has been renamed to
a, so when this code runs at the server, it does output
site="default-website.com";, but this value is never assigned, as the variable
site no longer exists in the local scope, and the renamed variable
a is used instead.
after: (nomunge selected)
function greet(name){var site="";<?php
// For this example, let's assume that
// we got an empty $siteName...
$siteName = getSiteFromSomewhere();
if ( empty($siteName) )
{
$siteName = 'default-website.com';
}
echo 'site="'.$siteName.'";';
?>alert(name+", welcome to "+site)};
after client-side: (nomunge selected)
function greet(name){var site="";site="default-website.com";alert(name+", welcome to "+site)}; With
nomunge selected, variables in the local scope do not get renamed, so the code in the previous example continues to work as expected.
If this option is selected, YUI Compressor will not remove the semicolons preceding a right curly brace.
When this option is selected, YUI Compressor won't perform the following micro optimizations:
- Literal strings concatenation
- Literal object member declarations
- Object member access optimization
Adds a newline character after a semicolon past the given column number. Valid values range from 1 to 9999.
Displays notices and warnings about your code. Error messages are always displayed regardless of this option.
note:
Use verbose mode only for debugging purposes. For normal compression operations it is better not to use verbose mode.
If YUI Compressor fails to minimize your code, HTMLcompressor will use
JSMin and retry minimization.
JSMin engine does a more basic and safe minimization to JavaScript code than YUI Compressor does, without renaming local symbols or any other kind of code optimizations, and has certain tolerance to malformed code.
When this option is selected, local symbols are not minimized.
before:
function greet(name)
{
alert(name);
}
greet("Mike");after:
function greet(a){alert(a)}greet("Mike");after: (nomunge selected)
function greet(name){alert(name)}greet("Mike"); By default
YUI Compressor minimizes local symbols (renames them to the shortest possible names), such as local variables and local function names as long as
eval() and
with() statements are not present in that scope to ensure that your code won't break. Global symbols are never minimized.
Let's see an example of the following code with an
eval() statement.
before:
var addtax = "amount = amount * 1.2";
function total(amount)
{
eval(addtax);
alert(amount);
}
total(50); When run, this code outputs: 60
after:
var addtax="amount = amount * 1.2";function total(amount){eval(addtax);alert(amount)}total(50); Notice that YUI compressor has not minimized the symbols in the function
total(), even when
nomunge was not selected. The execution of this script still outputs: 60
after: (Closure Compiler - Simple optimizations)
var addtax="amount = amount * 1.2";function total(a){eval(addtax);alert(a)}total(50); Notice the difference when using
Closure Compiler as the JavaScript minimization engine. With simple optimizations, Closure compiler renames symbols in the local scope regardless of any
eval() or
with() statements. The execution of this script produces the error: "amount is not defined".
For extended information on dealing with those statements, please check
Helping the YUI Compressor.
note:
To save you headaches HTMLcompressor checks the JavaScript code sent to the compiler and outputs a warning message when it finds eval() or with() statements in it, and your selected JavaScript minimization engine is Closure Compiler with Simple optimizations.
If this option is selected, YUI Compressor will not remove the semicolons preceding a right curly brace.
before:
function greet(name)
{
alert (name);
}
greet("Mike");after:
function greet(a){alert(a)}greet("Mike");after: (option selected)
function greet(a){alert(a);}greet("Mike"); When this option is selected, YUI Compressor won't perform the following micro optimizations:
- Literal strings concatenation
- Literal object member declarations
- Object member access optimization
before:
var user = { "name" : "Mike" };
alert( "Wel" + "come " + user["name"] );after:
var user={name:"Mike"};alert("Welcome "+user.name);after: (option selected)
var user={"name":"Mike"};alert("Wel"+"come "+user["name"]); Displays notices and warnings about your code that can help to improve it, such as already declared symbols, unsuported hints, declared but never used symbols in the local scope, etc.
Note that error messages are always displayed regardless of this option.
before:
function greet(name)
{
var color = "blue";
alert(name);
}
greet("Mike");after:
function greet(b){var a="blue";alert(b)}greet("Mike");Messages:
[WARNING] The symbol color is declared but is apparently never used.
This code can probably be written in a more compact way.
functiongreet(name){var ---> color <--- ="blue";alert(name);}greet Adds a newline character after a semicolon past the given column number.
before:
function greet(name)
{
name = "Welcome " + name;
alert(name);
}
greet("Mike");
By default (no value specified), YUI Compressor creates a single line output.
after: (default)
function greet(a){a="Welcome "+a;alert(a)}greet("Mike"); Use 0 (zero) as the column number to add a new line character after each semicolon.
after: (0)
function greet(a){a="Welcome "+a;
alert(a)
}greet("Mike"); Specifying a higher value (1 - 9999), YUI Compressor will add a new line character immediately after a semicolon past the given column number.
after: (30)
function greet(a){a="Welcome "+a;
alert(a)}greet("Mike"); Removes comments and unneeded whitespace characters from the JavaScript code.
before:
// Basic example...
function greet( name ) {
alert ("Welcome to" + " our site " + name);
}
greet( "visitor" );
after:
function greet(name){alert("Welcome to"+" our site "+name)}greet("visitor");
Removes comments and unneeded whitespace characters from the JavaScript code. Also renames local symbols and function parameters to shorter versions (munging), and performs various optimizations within expressions and functions.
before:
// Basic example...
function greet( name ) {
alert ("Welcome to" + " our site " + name);
}
greet( "visitor" );
after:
function greet(a){alert("Welcome to our site "+a)}greet("visitor");
Note that if your javascript code tries to access local variables by their variable name using
eval() or
with() statements, your code will break. As opposed to
YUI Compressor, which prevents local symbols from being renamed when it detects the presence of those statements,
Closure Compiler does rename them regardless of the presence of these statements.
before: (code with eval)
function greet( name ) {
eval ("name='Mr. '+name;");
alert ("Welcome " + name);
}
greet( "Smith" );
after: (code with eval)
function greet(a){eval("name='Mr. '+name;");alert("Welcome "+a)}greet("Smith");
tip:
You don't need to worry and check if your javascript code contains eval() or with() statements every time, as HTML Compressor does this automatically and will show you a warning, suggesting to change to White spaces removal level, or switch to YUI Compressor engine.
Performs all the optimizations used in
Simple optimizations level, but also goes way further with extreme compression techniques that transform your code in the local and global scope, renaming not only variables, but also function names and object properties. It also removes unused code and replaces some function calls with the body of the function (inlining) where possible.
This level provides the highest possible compression of all levels, but it also has a lot of requirements in order to make your code work, so it is not recommended to use with HTML Compressor unless you know very well what you are doing. For a troubleless compression of your documents, choose the
Simple optimizations level, or use YUI Compressor.
before:
// Basic example...
function greet( name ) {
alert ("Welcome to" + " our site " + name);
}
greet( "visitor" );
after:
alert("Welcome to our site visitor");
The use of this level when compressing javascript code contained inside x/html documents is restricted to the presence of a single
<script> ...
</script> with code to process (HTML Compressor will throw a warning and downgrade the compression level to
Simple Optimizations in such cases).
Any references to function names made from your x/html code inside intrinsic events (such as
onclick,
onload, etc) will break, unless you
export the symbols you want to keep.
note:
In Advanced Optimizations mode, Google Analytics and JQuery externs are loaded by default. The option to use custom externs will be added in the future.
By default Closure Compiler adds a line break near column number 500. Check this option if you want the compressed javascript to be a single line output.
Outputs code in a properly formatted way, which makes it more readable. This is useful to study how the Closure Compiler works, and how does it modify your code. Use it with any of the compression levels.
before:
// Basic example...
function greet( name ) {
alert ("Welcome to" + " our site " + name);
}
greet( "visitor" );
after: (Simple optimizations + Formatting)
function greet(a) {
alert("Welcome to our site " + a)
}
greet("visitor");
Displays notices and warnings about your code that can help to improve it.
note:
Verbose output with Closure Compiler sometimes produces an error output that would not happen if verbose mode was not selected. So it is recommended to check this option only for debugging purposes.
If the current selected JavaScript minimization engine fails to minimize your code, HTMLcompressor will use
JSMin and retry minimization.
JSMin engine does a more basic and safe minimization to JavaScript code than YUI Compressor or Closure Compiler do. It does a safe whitespace removal without renaming local symbols or any other kind of code optimizations, and has certain tolerance to malformed code.
Disable this option if you don't want the compressor to report empty code blocks and general informative messages.
When enabled, the compressor detects the Code Type you are trying to compress and will display a warning message if the detected Code Type and your selected Code Type do not match.
Please note that Code Type autodetection is not 100% accurate, however the detection ratio success is quite high as per the tests that we have performed. It is useful as a double check, and to help users who are not developers and may not be aware of the type of code they are trying to compress.