Fastest way to load many js files and variables

Question

for a bigger project which is a single website application I use very much of jquery, js and ajax calls.

As I would do in C# and ASP.Net of course I tried to split up functions / variables into a bunch of js-files for categories e.g. 1 file for my "Targets", 1 file for my "Commissions" (which are parts of my application)...

Now I nearly done with my work here and I ended up with around 20 to 25 js files, which I load one after antother in my default.aspx...

Is that the really correct (and fastest) way to handle this?

possible duplicate of [loading multiple javascript files - jquery](http://stackoverflow.com/questions/9405979/loading-multiple-javascript-files-jquery) — G.Mendes, Jul 23 '14 at 13:03
@Mark, depending on which version you use. You can bundle the scripts which will minify them - but this isn't automatic. — Christian Phillips, Jul 23 '14 at 13:05
Add some more information - do you use minification, do you really want to load all files at once or you want to load files as they are required? — Ilya Luzyanin, Jul 23 '14 at 13:06
You mean 90 I guess as else we're missing 81% of the application! — Rob Schmuecker, Jul 23 '14 at 13:07

codea · Answer 1 · 2014-07-23T13:22:49.030

Bundling and minification is actually a new feature of ASP.Net 4.5

You can see it by creating a new ASP.Net MVC 4 web application using visual studio and you use the Web Application template, it creates a Bundle Config Class, that probably does what you want:

public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        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*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "..."

    }
}

This bundle config class must be called on the Application_Start() method:

BundleConfig.RegisterBundles(BundleTable.Bundles);

score 0 · Answer 2 · answered Jul 23 '14 at 13:14

There are various tools that can come in useful for this. I would recommend using GruntJS http://gruntjs.com/ which has a plethora of tools/scripts ready to implement and take some of the grunt work out of deploying production-ready code as you are trying to do.

https://www.erianna.com/using-grunt-to-minify-and-compress-assets

A rather more hacky solution in the short-term is to use ySlow on firebug which via the tools` tab allows you to minify all javascript on a given page, output as text. You can then save that as one js file and then only reference that in your page which should suffice for testing purposes and if you JS codebase isn't going to change.

score 0 · Answer 3 · answered Jul 23 '14 at 13:37

You can configure bundling in ASP.NET (depending on the version you are using MVC 4 or webforms with asp.net 4.5+). As already suggested, you have a class with the following static method:

 public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        ...
        //your custom files
        bundles.Add(new ScriptBundle("~/bundles/customjs").Include(
                    "~/Scripts/js/file1.js",
                    "~/Scripts/js/file2.js"));
    }

You can then add them to your MVC page:

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

I think web forms is something like:

<%: Scripts.Render("~/bundles/customjs") %>

You can create custom bundles and group common files (maybe per section), so the page will only load these files. Either way, it should be a one liner on your page instead of copy & pasting the links on each page.

There is a caveat, if you've already minimised, I seem to remember the file won't be loaded.

However, if you are using an older version of ASP.NET, and you are looking to minify, then you can also use Web Essentials to minify each file.

Fastest way to load many js files and variables

3 Answers3