Bundling all the Scripts and css of the project together

Question

I have many scripts and css that I wrote in my MVC project.

I'm using Bundling and Minification and I know I can bundle them all togther like this:

bundles.Add(new StyleBundle("~/Content/site/").Include("~/Content/site/*.css"));
bundles.Add(new ScriptBundle("~/bundles/site").Include("~/Scripts/site/*.js"));

The problem is that I don't want to Render all the scripts and css together, I need one or two in each View, I know that I can manually register each script/css and then I will be able to render them separately in each View:

bundles.Add(new ScriptBundle("~/bundles/script1").Include("~/Scripts/site/script1.js"));
bundles.Add(new ScriptBundle("~/bundles/script2").Include("~/Scripts/site/script2.js"));

And then in one View:

@section scripts{
    @Scripts.Render("~/bundles/script1")
}

And in the second one:

@section scripts{
    @Scripts.Render("~/bundles/script2")
}

My question is if this is correct or there is a better solution for that.

The thing with the bundler is, that it bundles all your scripts. The overhead of downloading multiple small files is relatively big. The crucial part lies in the fact that scripts are usually cached at the client. Therefore I would put multiple files in one bundle. You basically don't need to touch the default implementation. — Stefan
– Stefan, Commented Mar 27, 2017 at 9:36
@Stefan thank you, if in terms of performance it's better to have them all together I don't understand how to pull them separately in each View? — user3378165
– user3378165, Commented Mar 27, 2017 at 10:25
Normally there is no need to separate them later. If the scripts can exist next to each other (so no global defined variables with the same name are in the scripts), you can follow @Georg's answer. Create one bundle and render the entire bundle on each page. You'll have all the js files and css files available. — Stefan
– Stefan, Commented Mar 27, 2017 at 10:31
Well, there are 2 aspects: download time and execution time. The bundling will optimize the download time because of minification, bundling and caching (caching is performed by the client). Less files, less connections, simplified caching => higher download speed. The execution time is usually much faster then the download time, so (depending on device's cpu and memory) this penalty is relatively small. This optimization is for the download part only. The problem with multiple script files is more files need to be checked against the caching mechanism, which slows down the page rendering. — Stefan
– Stefan, Commented Mar 27, 2017 at 11:48
So if you don't want to; it's no problem. But if you don't want to because of a performance penalty it's an optimization which I doubt couldn't be reached another way. — Stefan
– Stefan, Commented Mar 27, 2017 at 11:57

Georg Patscheider · Accepted Answer · 2017-03-27 09:49:35Z

4

Yes, it is correct to build multiple bundles that are tailored to the Views.

Note that you can add multiple specific scripts/styles to a bundle:

var commonJsBundle = new ScriptBundle("~/bundles/Common/Js");
commonJsBundle.Include("~/Scripts/jquery-{version}.js");
commonJsBundle.Include("~/Scripts/jquery-ui-{version}.js");

@Scripts.Render("~/bundles/Common/Js")

So you do not need to have a bundle for each individual script, rather bundle all custom scripts for a page (or Area) together.

PS: as noted by Stefan, there is a tradeoff between bundle size and the number of parallel connections a browser supports when downloading them. Therefore using many small bundles makes your page load slower. Maximum concurrent connections to the same domain for browsers

edited Mar 27, 2017 at 9:49

answered Mar 27, 2017 at 9:38

Georg Patscheider

9,4911 gold badge28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3378165 Over a year ago

Thank you for your answer, I don't fully understand how can I render them separately if I bundle all custom scripts together, could you explain?

Georg Patscheider Over a year ago

Let us assume you have two bundles: one "common" bundle that is used on every page, and a custom bundle "custom1" that is only used on the special page "page1". You would set up all bundles in the BundleConfig.cs. Then you would render @Scripts.Render("~/bundles/common") in your layout page, so every page gets this common bundle. And @Scripts.Render("~/bundles/custom1") only in the View for page1, so only this page gets its special bundle. If you define your bundles per Area, the _ViewStart.cshtml in the Area is a good place to load the Area-specific bundles.

Georg Patscheider Over a year ago

There is no way to only render parts of a bundle, you will need to set up different bundles if you only want to use some of the scripts. Note that the browser only does cache whole bundles, so having multiple bundles that contain the same scripts might not be a good idea.

Collectives™ on Stack Overflow

Bundling all the Scripts and css of the project together

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related