In MVC4 you can bundle javascript and css files

The new bundle option in MVC 4 is very nice I think. You can bundle your dependend javascript files to a single bundle and reference just this bundle on your view to have all the javascript files available. That's easy and clean!

But that's not the mean reason, the main reason is performance. Most webserver's just handle a few request at the same time. If you have a webpage with al lot of css and javascript references these files will be loaded in stacks of six files. If you have a bundle this will be loaded in one request so there is the optimalisation.

In a MVC4 project there is a new application folder: app_start wich wil contain a cs file: bundling wich will take care of the bundling action. It look like this:

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

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

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

So there is a lot of convention above configuration here. The version keyword between the brackets defnines that it just loads jQuery and do not care about the version. Now it's possible to update the jQuery files without to adjust the bundles.

Another convention is that in debug modus the standard jQuery files are used, but if you place you're project on the production server and change the debug tag in the webconfig to false the min versions of jQuery are used.

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

Using the bundles is easy also, just place it on you're _layout files like this

      @Scripts.Render("~/bundles/jquery")
      @Styles.Render("~/Content/css")

It's allso possible to load some bundles asynch ( html5 feature ) so this bundle will not stop youre page loading.

     <script src='@Scripts.Url("~/bundles/modernizr")' async> </script>

Loading javascript asynch is nice but you have to check the dependency's. jQuery has to be loaded for the most of the javascript files, so it's not an option to load jQuery asynch.

{{opmerking.Naam}}:

{{opmerking.OpmerkingText}}

            

Saving your comment....

Naam is verplicht!
Email is verplicht!
Opmerking is verplicht!