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

Joy picture Joy · Oct 12, 2012 · Viewed 10.2k times · Source

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

Pete - MSFT picture Pete - MSFT · Nov 2, 2012

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.