javascript files too big? - mvc

Question

I just checked my page size using firebug and all, and javascript files equal 478.2K!

    <script src ="<%= Url.Content("/Scripts/MicrosoftAjax.js") %>"></script> 
    <script src ="<%= Url.Content("/Scripts/MicrosoftMvcAjax.js") %>"></script>
    <script src ="<%= Url.Content("/Scripts/jquery-1.3.2.min.js") %>"></script>
    <script src ="<%= Url.Content("/Scripts/jquery.form.js") %>"></script>
    <script src ="<%= Url.Content("/Scripts/jquery.validate.js") %>"></script>
    <script src ="<%= Url.Content("/Scripts/xVal.jquery.validate.js") %>"></script>
    <script src ="<%= Url.Content("/Scripts/temp.js") %>"></script>
    <script src ="<%= Url.Content("/Scripts/jquery-ui-1.8.5.custom.min.js") %>"></script>
    <script src ="<%= Url.Content("/Scripts/jquery.ui.tabs.js") %>"></script

temp.js is my own file, and it has code of very few lines (like 10-20).

So what is going on? I mean how to fix this?

Answer 1

Start by getting rid of Microsoft*.js . If you use jquery you don't need those.

Answer 2

I would suggest that you use the minified versions of each js file and also that you combine them into one single js file (or as less as you can). Here is an interesting article that may help you.

Answer 3

Except for temp.js (which you say is quite small), all the other files are third party libraries.

I assume you're using all those libraries on every page? If not, one thing you could do would be to only include them on pages where they're being used.

The file names suggest that some of them have been minimised. If the others haven't been, you could run them through a minimiser, or alternatively go back to their home pages to see if they supply a minimised version you could use.

Some of them may also provide an option on their site to only include functionality that you intend to use. JqueryUI does this for sure, though from the filename you're using it looks like you already made use of it for that, but check to see if any other libraries also offer that.

Check that you haven't got any overlapping functionality - you may be able to rationalise by removing redundant code. You would have to be very cautious if that means editing third party libraries (that's not usually a good idea), but you may find you've got entire libraries that are unnecessary, in which case it'd be a quick win to get rid of one of them.

If you want to off-load some of the scripts to a third party, Google hosts JQuery, JQueryUI and a lot of other plug ins, and they allow sites to load them from their servers. It wouldn't affect the size of the scripts that the user has to download, but would save your servers quite a lot of bandwidth.

At the end of the day though, you have got a lot of big scripts there, and they're providing a lot of functionality. If you need all that functionality, you'll have to put up with the weight of the code.

Answer 4

their are many thing you can do for this situation

1. use minified or production version instead of developer version
2. load them from CDN if you can do that.
3. If files not been changes from long time that you need TO use Cache.

their are many other thing you can do for application performance improvement.

Answer 5

You could try gzip compression so that the server compresses it and is uncompressed by the browser. That should help a bit.

Maybe something like this .

Or better still, in IIS itself like this .

Answer 6

considering that you're importing the jquery UI library, jquery, the microsoft ajax framework, some validation framework etc.. its not too bad..

You can try minify the files to save space. Here YUI Compressor

Answer 7

If you are using well-known and popular libraries (like jquery) you can use externally hosted files from a cdn ( content delivery network ), which are more than likely already in the browser cache (and therefore won't need to be downloaded again): google list of libs and jquery ref

Minify it : http://jscompress.com/

I would also suggest refactor it (rewrite it so there is less memory used).

Answer 8

Telerik Extensions For ASP.NET MVC

How about this approach?

MvcContrib: an Outer Curve Foundation project

MvcContrib.IncludeHandling is same approach.