Require.js optimization vs asp.net mvc 4 bundling and minification

Question

Off lately I saw Mvc 4 has included bundling and minification of several scripts and css into a single link which minifies and decreases the script load time with a single configuration .

The require.js r.js is also an optimization tool available for script loading and minification . Can someone tell me which is better ? Or if require.js can be used as same as minification + bundling tool to load script into single file or not ? like same as Mvc 4 ?

I prefer to use require.js for AMD loading so thinking to apply the concepts of Mvc 4 minification idea if its available in require.js as single url loading for scripts and css for optimization and minification .

Can someone put some ideas and lights to this topic ?

Answer 1

Require.js is a client side tool, which allows the client to request only the scripts it needs. Often in an MVC app, every script ends up being added to the _layout.cshtml file, and not a lot of thought is put into what each controller needs. Require.js allows you to think about what each module needs in order to run.

r.js requires node or java, and is a server side tool that is somewhat analogous to MVC4 bundling and minification. r.js works in conjunction with require to try and minify the commonly used bundles and send them as a package. But by bundling and packaging them, you're sending them down potentially before the script "requires" them.

Where it gets interesting is that by bundling you're almost defeating the purpose of AMD. ie - you're bundling a whole bunch of dependent scripts into one file, rather than letting require.js sort out which ones it needs and make the request when and if it needs them.

A good reference on integrating require and mvc : http://www.stefanprodan.eu/2012/09/intro-requirejs-for-asp-net-mvc/ - note that it doesn't using bundling.

So for me - I'd think that minify the individual files (and bundle / minify the css) and let require to its work as it needs to in order to support AMD.

Answer 2

In my particular case (and many others that I have met previously) there is not much sense in performing additional server-load with separate request just for the purpose of loading 1-3kb script or style file.

• As mentioned such request uses server resources which are usually limited
• It takes time to load, 50-200ms guaranteed lag
• The more files you have the more the probability that one of them will fail loading due to connection issue
• There is also an overhead with amount of boilerplate code required for wrapping everything into modules

It looks much more efficient and safe to load even huge 5mb (which is unreal) bundled script once and having it loaded later from cache. By using GZip you will squeeze your 5 mb of text into 200kb of binary data which is far more less than the amount of graphical content an average site uses per request.