CODEWITHSUNDEEP
asp.net-mvcrequirejs
blgrnboy
blgrnboy

Reputation: 5157

Should I use RequireJS or ASP.NET bundling, or both

I'm a bit confused on what I should be using, or if somehow the two can/should be combined. Some of the libraries I use (such as jQuery) are AMD modules, while others (such as bootstrap) are not, so I am having to use shim config to declare the dependency on jQuery.

Now, prior to starting to learn RequireJS, I was bundling jQuery, bootstrap, and some other very commonly used libraries, and loading them in the layout. This provided me with a single file that had to be downloaded.

Since I am now using RequireJS, all those scripts are pulled individually based on the needs of each page. I like the modular code, but isn't there a performance impact of having to load all these individually, even if it is RequireJS doing it asynchronously?

Should I somehow be using a combination of both technologies, and if so, how do I go about doing this?

EDIT: I found this article as an example (http://therealmofcode.com/posts/2014/03/aspnet-mvc-bundling-minification-requirejs.html), but all the scripts in the ScriptBundle are modules, which allows RequireJS to find all the modules in the bundle. However, I want to be able to bundle other scripts that aren't AMD modules.

Upvotes: 2

Views: 585

Answers (1)

Jason Elkin
Jason Elkin

Reputation: 547

To answer the first part of the question...

Ideally both.

Loading scripts individually (async or otherwise) has a performance impact (more HTTP connections), but so does downloading larger bundled files.

Generally speaking, adding a few more KB to a bundle is better than making an extra HTTP request. Adding many more KB to a site-wide bundle is worse than making a new HTTP request for scripts that are only used on a few pages.

So the exact formula will be different for each site, depending on the number of scripts, their size, and their distribution throughout the site.

With this in mind I tend to create several bundles, one containing any site-wide scripts and several that are actually combinations of scripts as used by various pages throughout the site.

bundles.Add(new ScriptBundle("~/bundles/mainjs").Include(
      "~/Scripts/jquery-{version}.js",
      "~/Scripts/bootstrap.js",
      "~/Scripts/respond.js",
      "~/Scripts/site.js"));
        
bundles.Add(new ScriptBundle("~/bundles/forms").Include(
       "~/Scripts/jquery.validate*",
       "~/Scripts/dropzone.js",
       "~/Scripts/bootstrap-datetimepicker.min.js",
       "~/Scripts/trumbowyg.min.js",
       "~/Scripts/select2.min.js",
       "~/Scripts/autosize.min.js",
       "~/Scripts/forms.js"));

Then load these bundled files with RequireJS.

The problem with this approach is...

It breaks RequireJS's modularity

As you point out, unless each script is an AMD then you can't use RequireJS's bundling feature.

So you will have to treat each bundle as a module in its own right (rather than a collection of modules) and make them dependant upon each other using a shim (not overly familiar with RequireJS so don't have a code example).

This approach loses a lot of the best functionality of RequireJS... so although It will generally perform better, it's still not and ideal solution.

Unfortunately we'll be stuck in this state of limbo with this until all of the useful libraries are AMD/UMD modules (Bootstrap 4 is coming with AMD/UMD support).

Upvotes: 2

Related Questions