I was tasked with figuring out how to package JavaScript and CSS into one file per each. We have a java servlet application and we use JQuery if that makes any difference. We use ant to script our builds, so easy integration with Ant would be nice. We want to do this to reduce caching issues and to reduce number of requests to the servlet.
I found few tools out there, but not sure what are pros/cons of each. Here is the list so far:
JAWR (http://jawr.java.net/)
Juicer
(http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool)
JSBuilder2
(http://www.sencha.com/products/jsbuilder/)
JSLint
(http://code.google.com/p/jslint4java/)
(JavaScript only)
Quilt
(https://github.com/kitgoncharov/quilt)
(JavaScript only)
Do you guys have any recommendations, warnings, advices? Or maybe a better tool/framework?
Thanks in advance!
For JavaScript, the closure compiler integrates with Ant. It can concatenate and minify your JS. You can also use YUI compressor. Here's an example of using YUI compressor with Ant for JS and CSS.
By far my favorite template is HTML5 Biolerplate The build script there is pretty good as a template.
Also, versioned files with long cache times will greatly improve load times.
Replace "being nice" with "a must". You absolutely want something that integrates with your build tool since you do not want to minimize your files manually again and again and again and again and again and again and again and again and again and again.
Jawr - very nice library, makes everything for you, simple to integrate (at least with its Grails PLugin).
The small problem, I havn't found a way (may be it exists) to integrate ALL bundle's dependencies in a single file. (if you don't have dependencies between bundles (modules), you won't regret this decision).
Related
Folks, is there any smart way to easily find unused files in entire solution? My project was consolidated by previous developer and it gained size at least 3x. I'd like to shrink the size of project but I cannot find quick and easy way. Any advices?
This open source project might be a good place to start. It's meant to filter out unused images, but it should be pretty easy to change so it looks for unused files.
Find unused images in VS Web Projects
How about writing a program to do it? Could be a neat little project for a junior dev to write for you.
I think finding unused code is a job for a static analysis tool. As #kiru mentioned, Reshareper has this functionality and it is easy to use. They also offer a 1-month trial version.
The extension in the selected answer above only works in vs2012 while Code Maid works in vs2010 - vs2014:
There is a free extension called Code Maid that "is an open source Visual Studio extension to cleanup, dig through and simplify our C#, C++, F#, VB, XAML, XML, ASP, HTML, CSS, LESS, SCSS, JavaScript and TypeScript coding." Does images as well.
I am looking for a way to compress all tinymce js files into one single file.
I would like to use ant, yui-compressor and a build script. There seems to exist something like this already:
https://github.com/tinymce/tinymce
But i have not been able to make it work.
Can anybody with experience give me some assistance?
Solution from the tinymce forum (Spocke):
Install Java.
Install ant
Add ant to environment variable "path"
Open a console
cd to the tinymce dir and type "ant build_full"
We're using tinymce in our commercial grade productions. At first, we used their default .NET compressor. But, we've found it's too buggy for a real production. Then we made a simple IHttpHandler to concatenate given JavaScript files and JavaScript snippets. The handler also take advantages of caching to reduce response time. There should be some third party solutions if you don't want to waste your time.
I use visual studio 2010 for writing javascript and jquery. Are there any fast and easy ways to automate script combining? It doesn't have to be tied to Visual studio, any method that is simple and easy to setup will do.
THanks
SquishIt
The Friendly ASP.NET JavaScript and CSS Squisher
Try require.js. The nicest feature is that you can combine your dependency scripts at any point in your project lifecycle without any modifications required to your includes.
Give chirpy a try, lot's of nice visual studio integration. It will minify, uglify and mash them. It also handle css, less and coffeescript. Hopefully sass will be supported sometime soon ;-)
Do you have a step in your deployment process that minifies JS? Do you have any sort of preprocessor for your JavaScript that allows you to leave in comments and console.logs and then have them automatically stripped out? Is your JavaScript machine generated by GWT or Script#? Do you use ANT or another tool to automate deployment?
I see a lot of JavaScript that looks like it comes right out of the editor, complete with lots of white space and comments. How much of that is due to not caring about the state of the deployed code, and how much is due to the spirit of the open web?
I usually check it out with JSLint to make sure it is bug-free, then pack it/encode it with YUI compressor.
My steps include:
I write Javascript using TextMate with the Javascript Tools bundle installed. This JSLint's my files on every save and notifies me when errors occur.
I use Sprockets to automatically concatenate my various Javascript files.
I run the resulting concatenation through jsmin to generate a minified version.
I end up with a concatenated lib.js file and a minified lib.min.js file. One I use for development, one for production. TextMate commands help automate it all.
I'm still looking for a good solution to actually (unit) test my scripts.
Check out YUI Compressor its a console app that you can use to minify (strip out comments, whitespace etc..) and also obfuscate your javascript files.
JSMin it from Douglas Crockford. We've got it hooked up as a macro in Studio as well as a post build item for some of our larger projects
FWIW, here's an interesting mini-benchmark on various ways you can minimize your Javascript source:
http://www.ericmmartin.com/comparison-of-javascript-compression-methods/
In short:
gzip compression in HTTP protocol really makes a difference (although you need to pay a CPU cost at the server side)
minification (removal of whitespace/comments, change of variable names etc.) also helps, and if you want best result, use it together with gzip compression
js-based decompressors are most likely useless - while you might get smaller size, the CPU overhead on the client is significant.
For one of our products, we concatenate all Javascript files together (most files are used on most pages, so this makes sense for us) and use Javascript::Minifier. This has given us a pretty nice speed boost.
A lot of it is probably due to not caring about people that might be viewing your pages on slower machines with slower connections and assuming that everyone has a 50Mbps line and three Gigs of RAM.
We are minifying our (hand-written + plugins, jQuery, etc.) JS as a part of the build process in .NET environment. No preprocessor, this is something we should definitely be doing once time permits.
P.S. By the way, we're not using console.log, as this will break IE. Instead we have a simple wrapper function, something like:
function log(stuff) {
if (window.console && window.console.log) {
console.log(stuff);
}
};
I have a PHP script that does it on the server side and keeps a cache of whatever it pulls from the source folder(s).
One word- packer
Light a candle, whisper a prayer against IE6 errors, and click "go". Does that count? :)
I don't minify my own javascript code since text tends to gzip/compress well.
I would minify a very large (say > 100 kb) javascript library (but then again I probably would not want to be using such a large library (or just ship what i use)).
I tend to believe that a lot of the javascript-minification is (in reality) done to achieve some sort of (futile) obfuscation of javascript code instead of the proclaimed end-user performance gain.
There's also a .NET port of YUI Compressor which allows you to:-
intergrate the minification/file combining into Visual Studio post-build events
intergrate into a TFS Build (including CI)
if you wish to just use the dll's in your own code (eg. on the fly minification).
I thought I would share my approach to js deployments. Have a look at this blog post:
http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx
This also includes code to compile (using google's closure compiler) at runtime (when needed).
Thanks Guido
I am doing speed optimization for my website application. And I found some practises to do that.
For example Best Practices for Speeding Up Your Web Site from Yahoo.
Among them are:
Minify JavaScript and CSS.
Minimize number of HTTP Requests by combining several files (css, js) into one.
My question is what infrastructure, tools and building process you use or can recommend to perform that?
According to the JavaScript Compression Rater, the most efficient tool is the YUI Compressor or JSMin.
You can use YUI Compressor.
It can compress JavaScript as well as CSS. Just run it for all your files, then concatenate them into one 'package' file. You can either do that manually, write a Makefile or use some script to compress "just-in-time" on web request, although you might want to cache the resulting file.
The Yahoo tips are excellent. I use gomez to test the results of optimization efforts. Minification is a good step. I've found bigger impacts can usually be made by adjusting the way pages are put together (particularly in reducing how much images get cut up into little pieces to reduce the number of requests). Anyway, this yahoo blog gives a pretty good rundown of minification tools. I typically stay away from obfuscation unless there's a compelling reason beyond the relatively small performance kick. The actual steps to install and use a minification tool are relatively straightforward.
Or you could just configure your HTTP server to GZIP compress all text documents.
I do ASP.NET, so I use CruiseControl.NET with NAnt for my build process. A part of this build process is compressing with YUICompressor which in my experience is the best compressor out there.
If you don't do ASP.NET, theres still the original CruiseControl with Ant that you can use in the same capacity.
The reason I find this a superior set up is because a) all the tedious stuff is automated and b) if you're testing on your own machine you dont have to debug a single super long string of JS :)
I've integrated minification to my deployment process. I do it in perl with packages JavaScript::Minifier and CSS::Minifier.
During my development, I want to keep the script expanded. I put some comments in my HTML so that my script knows which files to put togetheer and minify:
<!--- MinifyJS[js/minified-1.js] -->
<script src="..."></script>
<script src="..."></script>
<!-- end[js/minified-1.js] -->
<!--- MinifyCSS[css/minified-1.css] -->
<link ...>
A couple of regular expression, and I quickly get a "production" version with minified files.
I wrote my own custom manager for this. It uses google's closure compiler and compresses files only when needed in release mode. Check it out:
http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx
Thanks
Guido Tapia
Big fan of Dean Edwards /packer/ myself - comes in a variety of flavours.
By following yahoo blog link I've found one real solution - "Make your pages load faster by combining and compressing javascript and css files" by Niels Leenheer.
For compressing everything before uploading it to web, this program is great both for CSS/JS/HTML:
http://www.w3compiler.com/
It's even possible to select areas not to compress, as it's not all MVC codes in your markup that supports getting compressed.
And it saves backup files each time it compress your files, so you can easily decompress it with just a click.
I've found Minify most useful for my PHP projects. Very easy to use, just saves time configuring minimization, compression and caching of CSS and JS files manually. Also has a neat grouping feature.
Some notes about YUI Compressor
YUI Compressor generates without line breaks at all while Minify has some.
Be careful if you have escaped strings. I've found out that YUI Compressor unescapes them. So strings like "\'" become "'".