Finding a better way for Javascript bundling and loading

Question

I am using asp.net mvc 5. I have made various bundles on server like below as each page needs different set of files.

        bundles.Add(new Bundle("~/scripts/external/4")
       .Include(
       "~/Static/Scripts/External/jquery-2.1.3.min.js",
        "~/Static/Scripts/External/jquery-ui.min.js",
        "~/Static/Scripts/External/bootstrap.min.js",
          //and 13 more files
        ));

        bundles.Add(new Bundle("~/scripts/admin/external/1")
       .Include(           
      "~/Static/Scripts/External/jquery-2.1.3.min.js",
       "~/Static/Scripts/three.min.r76.js",                
        "~/Static/Scripts/app.min.js",
       //and 15 more files
      ));

As you can see some js files are getting repeated (sometimes 4,5 big files are common) as they can't be cross referenced.

I am using lab.js on client side to load these bundles.

Requirejs is not going to work here as problem is with bundles. What is your recommended approach here for bundling files and loading them without blocking?

score 0 · Answer 1 · edited May 23 '17 at 12:17

0

I think that depends a lot on the structure of the application. What is the reason for having many bundles? It shouldn't be a problem if you would load scripts on a page which are not being used.

Ordinarily I would have most of the vendor scripts (such as jQuery in your example) grouped together as they are required in most pages of the site. Then if there is a section of the site which needs another group of scripts I would group these together. This way they are fetched once and then cached and retrieved from cache. Having many different bundles means that the files will be unique and therefore not be cached. I think it is better to have a few large files than many small ones.

As a side note, I am not fond of ASP.NET's bundling and use an task runner such as gulp or grunt to create the bundles, but the same setup could be done in ASP MVC too.

But HTTP/2 things could change: Why bundle optimizations are no longer a concern in HTTP/2

edited May 23 '17 at 12:17

Community

1
1

answered Apr 29 '17 at 10:48

Kevin Farrugia

6,431
4
38
61

My web server still have no support for http 2. We need to do big changes to bring it. Referred js files list varies a lot across pages. We tried for common bundles but it did not work as our js code could not find those common files even though we were referring them – Mandeep Janjua May 01 '17 at 23:50
What do you mean when you say that your JS code could not 'find' the common files? – Kevin Farrugia May 02 '17 at 06:30
I meant - let's say you store common js files in a common bundle but when you refer that common bundle from other bundle then it was throwing an error about not able to locate js files from that common bundle – Mandeep Janjua May 05 '17 at 01:38

score 0 · Answer 2 · answered Apr 30 '17 at 06:57

I think loading all libraries in one list and getting distinct value is best way:

List<string> bundlesList = new List<string>();
bundlesList.Add("~/Static/Scripts/External/jquery-2.1.3.min.js");
bundlesList.Add("~/Static/Scripts/External/jquery-2.1.3.min.js");
bundlesList.Add("~/Static/Scripts/External/jquery-ui.min.js");
bundlesList.Add("~/Static/Scripts/External/bootstrap.min.js");
bundlesList.Add("~/Static/Scripts/External/bootstrap.min.js");

IEnumerable<string> ids = (from x in bundlesList select x).Distinct();

bundles.Add(new ScriptBundle("~/bundles").Include(ids.ToArray()));

I hope this work :)

The referred js files varies a lot across pages. Now, you might say we can load all the files during the first hit but that will slow down the initial page load by a huge number — Mandeep Janjua, May 01 '17 at 23:43

Finding a better way for Javascript bundling and loading

2 Answers2