We Keep Coding

Javascript compression options [duplicate]

This question already has answers here:
What is the best method to reduce the size of my Javascript and CSS files?
(18 answers)
Closed 7 years ago.
Good day everyone.
I have read up quite extensively on Javascript Compression. I currently host 23 javascript files using IIS GZip compression method. I just want to know is there a better solution to compress the javascript files. My one file is over 7MB this is causing quite a problem at the moment. Is it Possible to Use MVC Type Bundles To render the javascript? I am using Asp.Net
Thank you in advance.

Here's what you must do
1) Concatenate javacript files to minimize the overhead related to file querying (this overhead will disappear with HTTP2 but we're not quite here. Today your page is probably more slowed by the number of files than by their combined size. There are many ways to concatenate files but it should be automated so that you don't have to do it manually every time you change the source files. If you're not familiar with powershell and the likes, dive into build solutions.
2) Don't compress the JS file(s), let the browser and the server negotiate the compression themselves. Any decent server gzip the JS files it serves.
3) Minify the concatenated file. Here again there are several solutions. Uglify.js is both fast and efficient. The minification is a process which consists in removing any useless (for the browser) part of your code (comments, spaces, etc.) and renaming some variables in order to make the code lighter. You'll configure the minification to also produce a source map file which will let you debug in the browser (not quite as easily than with an unminified file but much better than without a map).

JavaScript minification and compression

I am trying to understand JavaScript minification and compression processes and have couple of questions on these:
Since minification makes the code difficult to debug, is it possible to do on-demand de-minification on client-side to cover-up for cases where you actually need to debug and investigate something on the website?
I remember reading somewhere that one can enable compression of all resources (like images, CSS, JavaScript etc.) by setting some options in the Apache Web Server. Is there any difference in the JavaScript compression done at Apache level and, the one done using tools like YUI Compressor?
Can someone help me know the above?
The kind-of cases where I would actually need to de-minify my JavaScript files is let's say a JavaScript error happened at line no. X. With a minified files it would be very tough to know which block of code caused that error in production as the lines are all wrapped up in a minified file. How do you guys investigate and debug in such circumstances? Another user also mentioned this debugging problem in Packed/minified javascript failing in IE6 - how to debug? questions (slightly specific to IE6 though).

You shouldn't be debugging minified code. Ideally, development process is like this:
You build and debug the site locally. You have full versions of javascripts, stylesheets and everything.
You deploy a version to production machine. You minify and gzip a copy of your assets and push that to the server. Your local development copy is left untouched.
If there's a bug in production, you modify your local version, minify, compress, upload.
Repeat until PROFIT

Chrome Dev Tools can de-obfuscate (and de-minify) javascript code if you want to debug production code (useful when trying to replicate a bug on a live environment you may not be seeing in dev)

Typically developers will develop against the uncompressed script file, compress right before deploying.
If you have to go back and debug your script files, you'd just open up the regular, uncompressed file, do your work, compress, and deploy. If you mean debug something while your website is in production, then no, you can't un-minify your script file on demand.
And yes, Apache, and even IIS, can gzip compress scripts and images automatically for you.

Since minification makes the code difficult to debug, is it possible
to do on-demand de-minification on client-side to cover-up for cases
where you actually need to debug and investigate something on the
website?
Sort of. Minified javascript has the same structure, it just does things like delete extra spaces and shorten variable names. So you can easily make the code readable again, either manually or with a script, but you can't recover variable names, so the code will still be harder to work with. So, if you have the original code, definitely don't get rid of it. Save the minified code separately.
I remember reading somewhere that one can enable compression of all
resources (like images, css, javascript etc.) by setting some options
in the Apache Web Server.
Yes, it's called gzip compression. It's not unique to apache, but you would need to configure your server to enable it.
Is there any difference in the javascript compression done at Apache
level and, the one done using tools like YUI Compressor?
Yes. YUI compressor is a minifier - the output is valid javascript. Server-side compression is more analogous to zipping a file - the browser must decode it before it can be used. Using the two together would yield the smallest filesize.

I prefer working with a local unminified copy of the JS-file, and when i deploy the site, I minify all JS-files into one. That way it is easy to debug and improve the code. However, there are tools to revert minification. Have a look at this SO post on revert minification of JavaScript.
Have a look at GZIP compression - This blog describe how to enable GZIP in Apache and how to verify that your server actually is compressing the files.

is it possible to do on-demand de-minification on client-side
Some browsers have a "pretty code" view that automatically formats source code. See Firebug's CSS tab.
Is there any difference in the javascript compression done at Apache level and, the one done using tools like YUI Compressor?
YIU Compressor is a actually a minifier. Apache compression is like ZIP-ing up the file before it is sent to the client so the actual file that is sent is smaller than the file on disk. They are two different technologies that are independent of each other.

Enable Gzip compression for javascript hosted on other server

We have a website say 'abc.com' which uses lot of javascript and css hosted on another server 'xyz.com'. We upload js and css on to this server and it gives us a URL, which we use/reference in our code.
Now I ran YSLOW on my website, and it complains that these javascript and css files can be compressed. When I inspect response headers using firebug, Content Encoding of response is set to 'GZip'.
My question would be 'how to enable compression for these javascript and css files, hosted on other server'. Is there something, we can do on our side?
Any suggestions are welcome.

You will have to use tools like YUI compressor to compress your js and css files, before uploading to the server.
EDIT:
Please check this link on how to enable gzipping your js and css files. But, I doubt it is possible for you to do this since the files are hosted on third server(unless you are managing it).

JavaScript and CSS compression goes beyond typical all-purpose compression algorithms like gzip.
There are domain specific solution for compressing JavaScript and CSS.
See:
http://developer.yahoo.com/yui/compressor/
http://code.google.com/closure/compiler/
https://github.com/mishoo/UglifyJS

To clarify the terminology used by YSlow (and similar tools like Google's PageSpeed):
Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip.
Minification removes unnecessary characters from a file to reduce its size, thereby improving load times. When a file is minified, comments and unneeded white space characters (space, newline, and tab) are removed. This improves response time since the size of the download files is reduced.
Some good references that cover both compression and minification:
Yahoo: http://developer.yahoo.com/performance/rules.html
Google: http://code.google.com/speed/page-speed/docs/payload.html
Stoyan Stefanov: http://www.phpied.com/reducing-tpayload/ (examples for Apache+PHP, but can apply to any web server)
As robert mentioned in his answer, enabling compression on the other server would be a configuration change on that side. If you wanted to minify the JS/CSS components, you could do that with a minification tool prior to hosting on the other server.

Make javascript file to min version [duplicate]

This question already has answers here:
Closed 13 years ago.
Possible Duplicates:
How to organize minification and packaging of css and js files to speed up website?
What do you use to minimize and compress JavaScript libraries?
Hi there
Do you know any tool/method which can help me to minimize the size of a javascript file?

There are a number of online tools available for minimising your javascript. The following tools all require a download and to be run on your machine:
YUI Compressor
JSMin
ShrinkSafe
These tools allow you to paste in/submit your javascript online and get a minimised version back without having to run any programs on your machine:
Packer
JS Minifier
One potential issue with minimising your javascript is the need to keep a minimised version in your codebase for deployment, and an expanded version for development/maintenance. One way around this is to have your webserver look after compression and minimisation of the files in question. This may lead to some additional overhead on your webserver, but you can address this via cache lifetimes etc.
For Apache, Apache2::Response::FileMerge handles this, and can use JavaScript::Minifier to do the actual minimisation.
On nginx, NginxEmbeddedPerlMinifyJS will do much the same thing.

There are two that I know of:
JSMin
YUI Compressor (Java version, .NET version)
The YUI compressor is slightly better in that it will compress CSS too. The .NET version can be integrated with MSBuild.

I have been using JavaScriptMVC for a while, which has a built-in function to combine and compress all javascript files. But it's actually a complete framework to structure your code.
There are a lot of minifiers on the market. Here are three:
MinifyMe
Dojo also has a compressor
Compressing with JavaScriptMVC
The great benefit of JavaScriptMVC and Dojo is that they don't use Regular Expressions to perform compression. I don't know about the other ones. Compression by using regular expressions can sometimes lead to errors in your compressed/minified Javascript code and is kind of brittle

Other answers mention various tools to minify your Javascript/css.
however, don't forget you can also GZip your javascript/css, as demonstrated here for isntance - either manually or using some preparation stage when you deploy, or by using mod_gzip or an equivalent.

I'm successfully using the YUI Compressor.

I like JavaScriptCompressor.com simply because it's online and doesn't need any software to be downloaded or installed.

Check out this site. It compares different JavaScript compression utilities on the fly.

YUICompressor or similar in PHP?

I've been using yuicompressor.jar on my test server for on-the-fly minimisation of changed JavaScript files. Now that I have deployed the website to the public server, I noticed that the server's policies forbid the use of exec() or its equivalents, so no more java execution for me.
Is there a decent on-the-fly JS compressor implemented in PHP? The only thing resembling this that I was able to find was Minify, but it's more of a full-blown compression solution with cache and everything. I want to keep the files separate and have the minimised files follow my own naming conventions, so Minify is a bit too complex for this purpose.
The tool, like yuicompressor, should be able to take either a filename or JavaScript as input and should either write to a file or output the compressed JavaScript.
EDIT: To clarify, I'm looking for something that does not have to be used as a standalone (i.e. it can be called from a function, rather than sniffing my GET variables). If I just wanted a compressor, Minify would obviously be a good choice.
EDIT2: A lot has changed in the five years since I asked this question. Today I would strongly recommend separating the front-end workflow from the server code. There are plenty of good tools for JS development around and except for the most trivial jQuery enhancements it's a better idea to have a full workflow with automated bundling, testing and linting in place and just deploy the minified bundles rather than the raw files.

Yes there is, it's called minify.
The only thing in to worry about in the way of complexity is setting up a group, and there's really nothing to it. Edit the groupsConfig.php file if you want multiple JS/CSS in one <script> or <link> statement:
return array(
'js-common' => array('//js/jquery/jquery-1.3.2.min.js', '//js/common.js', '//js/visuals.js',
'//js/jquery/facebox.js'),
'css-common' => array('//css/main.css', '//css/layout.css','//css/facebox.css')
);
To include the above 'js-common' group, do this:
<script type="text/javascript" src="/min/g=js-common"></script>

(i know i was looking for the exact same thing not knowing how to deal directly with the jar file using php - that's how i ended up here so i'm sharing what i found)
Minify is a huge library with tons of functionalities. However the minifying part is a very tiny class : http://code.google.com/p/minify/source/browse/trunk/min/lib/Minify/YUICompressor.php
& very very easy to use :
//set the path to the jar file
Minify_YUIcompressor::$jarFile=_ROOT.'libs/java/yuicompressor.jar';
//set the path to a writable temp folder
Minify_YUIcompressor::$tempDir=_ROOT.'temp/';
//minify
$yourcssminified=Minify_YUIcompressor::minifyCss($yourcssstringnotminified,$youroptions)
same process for js, if you need more functionalities just pick from the library & read the source to see how you can make direct call from your app.
I didn't read the question well, since minify is based on using the jar files, the op can't use it anyway with his server config
Minify also include other minifying methods than yui, for example:
http://code.google.com/p/minify/source/browse/trunk/min/lib/JSMinPlus.php?r=443&spec=svn468

Try Lissa:
Lissa is a generic CSS and JavaScript loading utility. Lissa is an extension of the YUI PHP Loader aimed at solving one of the current loader limitations; combo loading. YUI PHP Loader ships with a combo loader that is capable of reducing HTTP requests and increasing performance by outputting all the YUI JavaScript and/or CSS requirements as a single request per resource type. Meaning even if you needed 8 YUI components which ultimately boil down to say 13 files you would still only make 2 HTTP requests; one for the CSS and another for the JavaScript. That's great, but what about custom non-YUI resources. YUI PHP Loader will load them, but it loads them as separate includes and thus they miss out on benefits of the combo service and the number of HTTP requests for the page increases. Lissa works around this limitation by using the YUI PHP Loader to handle the loading and sort of YUI and/or custom resource dependencies and pairs that functional with Minify.