CODEWITHSUNDEEP
javascriptasp.net-mvcrequirejs
SCS
SCS

Reputation: 639

Starting an ASP.NET MVC 4 project. Is it necessary to use RequireJS if I'm using bundling?

I'm very new to both bundling and RequireJS, but after doing some reading, it seems like bundling takes care of multiple requests to load several js files. Are there any other things I might be missing out on with regards to using RequireJS with bundling?

Upvotes: 2

Views: 597

Answers (2)

Mike B
Mike B

Reputation: 2706

RequireJS is suitable and some might say necessary for projects that implement JavaScript heavy UIs.

  1. To your first point, RequireJS doesn't work the same way as Asp.net MVC bundling. By default, scripts continue to be loaded separately. With bundling, you control how your scripts get combined in MVC. With RequireJS, you write each individual module of code in such a way that it can be declared as a dependency within another module as well as declare its own dependencies. Essentially, you end up handling all you JS structure within JS.
  2. RequireJS offers much more than just a bundling mechanism. If you're building a UI with JavaScript, you're going to be better off with RequireJS. If you just need a couple jQuery widgets, Asp.net MVC bundling will be the simplest to set up.

Multiple requests aren't always a bad thing. What's most important is that the solution you choose scales as your project grows.

Upvotes: 2

Jupaol
Jupaol

Reputation: 21365

If you are going to use MVC 4, I would recommend you to use Bundles.

With bundles, you can define set of scripts that will be rendered on the browser depending if you are debugging or in production.

In order to detect if you are in debug or not, you have to change the following setting in the web.config file

<compilation debug="true">

  • If you are debugging, the Bundle engine will render all scripts as individual tags.

  • If you are NOT debugging, the Bundle engine will render just one tag and all the scripts referenced by the current bundle will be merged in an individual JS file

Also bundles use conventions in order to detect the script file that should be rendered

Simple Example

For example, in the case of JQuery

The JQuery script files look like:

  • jquery-1.8.2.js

  • jquery-1.8.2.min.js

When you declare your bundles, you do it like this:

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

Note that you are not specifying the version nor the .min part of the file name, this is because those are special tokens that the bundle engine will take into consideration to choose the correct file

Whenever you reference your bundles using the specified path, the bundle engine will process them, and it will choose the correct scripts files, for example:

  • If debugging, the jquery-1.8.2.js file will be rendered

  • If not debugging, the jquery-1.8.2.min.js will be rendered

In this example, the bundle is named: ~/bundles/jquery and you will referenced on your pages like this:

@Scripts.Render("~/bundles/jquery")

If the bundle would have more scripts, the same rules apply to all of them.

Complex example

Consider this bundle registration

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*",
            "~/Scripts/jquery.validate*"));

  • If debugging this will be the rendered HTML

    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

  • If not debugging, this will be rendered:

    <script src="/bundles/jqueryval?v=6Fqs6ZHMM_nFyDgv5mxz89PzsVLAnRNKOhqrK-mI5yU1"></script>

    And that link will contain all the script files merged causing the page to load faster since all the scripts will be downloaded by the browser in just one hit

For more information, Please see the ASP.NET 4.5 new features

Upvotes: 2

Related Questions