30

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 ?

Improve this question
1
  • Can someone put some light on this fact ? Commented Oct 17, 2012 at 18:09

2 Answers 2

Reset to default
21

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

But even if i Minify via r.js ( Not bundle ) and let require.js do its work ( like loading script on need ) . If i open firebug . I still see the scripts get loaded on page load via main.js ( the main script file which is called by data-main attribute. So in a manner it caches the js files thats alright . But what it does it entirely loads all the scripts one at a time (actually al least thats what I see in firebug ). And then later on it requests the scripts only at time of need . So isnt that actually less purposeful if I consider in terms of loading content and network bandwidth ?
That's odd - my understanding of require is that it will only request them when needed, not download the full amount. Maybe there's a conflict between r wanting to put them altogether, and require wanting them one at a time such that it's doing both?
good point noted . I would look into it ... however until a correct resolution and insight found for the question I wont mark it as answer :) plz dont be offended :) I also would like you to explore on the fact I stated above :)
You've definitely got optimize=none? If you haven't, r will serve the entire file upon first call. Then - require will send each file individually as needed... which is what appears to be the case for you...
9

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.

Improve this answer

4 Comments

so in a manner you are saying that compression and minified version of bundled js with asp.net mvc bundling is much more efficient than performing a server load for ajax request with requirejs ?
yes, seems more logical to use one script file per site and to have it loaded the first time user visits your site, later cached version will be used
Your point is valid . But for those who are using javascript oriented structure somewhat where like module definition for SPA's . Isnt that requirejs shines out more ? Like you can manage everything into folder structure and manageability is better ? . Apparently I knw i'm deviating from topic but just curious
In my case I already manage everything into folder structure. Before my application starts it goes through my scripts folder and selects all filenames and their paths from it, when all filenames are selected I run the script that optimises all found scripts into one file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.