I've minified a .js file, and everything is just fine. But, when I gzip, the browser no longer executes the file. What am I doing wrong? Here's the gzip command:
> gzip test.js
Which results in a regular gzip file called test.js.gz. Do I need to include something in the .js, or pass an added argument to gzip so the browser interprets the file correctly? I tested this with both Chrome and FF.
Thank you advance!
This isn't a client side problem.
Your web server has to be configured to recognise the gzipped file, and send the appropriate Content-Encoding: gzip header to tell the browser to expect gzipped data.
Related
I have a strange problem with my Tomcat 7 (both on Ubuntu and on Windows 7, no Apache in front of Tomcat) compressing CSS/JS.
It works sometimes:
I have a big third party CSS (comprising of Bootstrap, Angular) and JS (Bootstrap, Angular, JQuery), which is NOT compressed. Tomcat doesn't send an
content-encoding: gzip
But my very own CSS/JS are gzipped, as they should (Tomcat sends an content-encoding: gzip to browser in this case).
So this is the server.xml of my Tomcat:
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443"
compression="force"
compressionMinSize="2048"
compressableMimeType="text/html,text/xml,application/javascript,text/css"/>
So in short:
js/thirdParty.js is uncompressed: FAIL!,
js/own.js is compressed: OK
What could be the reason behind that?
Thanks,
Bernhard
I found it out by myself. I have to add the attribute
useSendfile="false"
to the Connector tag. If I don't, Tomcat will not compress
files greather than 48kb (when I use NIO, which is standard for Tomcat7+).
I was working for a client, and his server doesn't allow running javascript. I tried to re-create and re-upload the JS files but the server keeps changing the file type into text. What's up with this? See screenshot below...
You need to add the .js file MIME type in your Apache http.conf with AddType:
AddType application/x-javascript .js
This will tell Apache to serve .js files with the application/javascript type you need.
I just got the GZip software from this site http://www.gzip.org/#intro and was looking at it and tried to convert a javascript file which it just converted directly and changed the extension to gz.Can someone tell me how can we create a new file without modifying the original file using GZip command line and also is this GZip file the same which say a web server like IIS creates and sends to the client when compression is enabled.
I am thinking of GZipping all our JS and CSS and HTMl files before hand so the web server can directly render it .I know the web server by itself only renders these zip fles if the client supports but I m just trying some new stuff.
Assuming you're on a *NIX machine, you can use
gzip -c FILE > FILE.gz
to write the gzipped data to a different file. The -c writes to stdout, and the > redirects stdout to a file. If you have many you could try a loop in Bash:
for file in *.js
do
gzip -c "$file" > "${file}.gz"
done
Also, be really really certain your server falls back on the nongzipped versions if the client doesn't support it!
179KB of jQuery is Minified and Gzipped to 26KB. I am trying to do the same compressions to my javascript files and found the Yuicompressor to Minify it. But I am still searching for a way to Gzip it.
How can I Gzip my Javascript files?
If you are using it in a webpage, gzip is a configuration method in your web server. The file is gzipped by the server, sent to the browser. No manual action is needed. For Apache: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html.
If you are delivering the code to developers, you could use the gzip command.
You would use gzip, the GNU compression utility. Luckily, the gzip algorithm and file structure is implemented by numerous other tools, such as 7zip (for Windows). You can configure your server (via mod_deflate or others) to compress files on the fly, but for static content its a waste of CPU power.
Here is an article which shows how to transparently serve pre-compressed gzip to browsers which support it: http://blog.alien109.com/2009/03/17/gzip-your-javascript/
You could also use zbugs.com - just provide your website url and it will do everything for you.
Jquery.com shows Minified and Gzipped version as 19KB?
Production (19KB, Minified and Gzipped)
Development (120KB, Uncompressed Code)
but when we click on download for Production version. it goes to this link
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=
and the file which is on this page it's size is 55.9 KB. Why jquery.com showing Production (19KB, Minified and Gzipped)
The file's unzipped size is 55.9 kB. That is the result of the minification, which is a shortening of variable names, stripping of white space and the likes.
When you gzip it additionally, it will lose even more size. The gzipped file is downloaded by the browser and unzipped into the 55.9 kB large, minified version internally so it can be read by the JS interpreter.
You can zip files using gzip but usually, if the server is set up correctly, the server will automatically serve gzipped files if the browser signals it can handle them. In that case you don't have to do anything. You can see whether a file was transmitted gzipped using the "view size information" tab in the Web Developer Toolbar for Firefox.
How to get 19KB Minified version of
jquery file?
% wget http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
% gzip jquery-1.3.2.min.js
% du -b jquery-1.3.2.min.js.gz
19716 jquery-1.3.2.min.js.gz
Download this JQuery minified version. Then ensure that your webserver is gzipping output. You need to ensure mod_deflate is enabled and then place the following (similar) setting in your .htaccess file:
# compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript application/javascript text/css .php
# Or, compress certain file types by extension:
<Files *.html>
SetOutputFilter DEFLATE
</Files>
That will ensure your files are gzipped to the browser. You can use the webdeveloper toolbar to check the sizes.
To do this in IIS then follow this tutorial