Why do my script bundles load with every page view in ASP.Net MVC?

Question

I'm a little confused. I have my _layout.cshtml page below and it has a bunch of bundles containing .css and .js files. When I first load the site it runs through each file in the bundles. Fine, OK, great! But then on each new view, each line of code from every file gets run through again! (ex. jQuery, bootstrap, etc) I set break points to test this and they were all hit every time I loaded a new view.

I thought the whole purpose was the browser would be to cache these files so they wouldn't load each time a new view gets called? Am I missing some understanding here? Did I not set up the layout correctly? Are they not being loaded but the code is being run through (that's why all my break points are being hit) with each new view?

Is there a way to set it up so this doesn't happen and all the files are loaded once when my clients visit my home page? I don't understand why each .js file (ex. bootstrap) is loaded on every view that gets loaded!!

Here is my layout page

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

  <title>Yogabandy - @ViewBag.Title</title>
  @Styles.Render("~/Content/yogabandy-base/css") 
  @RenderSection("content", required: false) 
  @Scripts.Render("~/bundles/modernizr")

</head>

<body>

  @Html.Partial("_Navbar")


  @RenderBody()

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUWFuy0zfuKe4uig_koh3O6SRDaf40gA4&libraries=places" async defer></script>
  @Scripts.Render("~/bundles/jquery") 
  @Scripts.Render("~/bundles/bootstrap") 
  @Scripts.Render("~/bundles/jqueryval") 
  @Scripts.Render("~/bundles/yogabandy-base") 
  @RenderSection("scripts", required: false)
</body>

</html>

The browser does cache them. But JavaScript has to be parsed and loaded in order to run... You'd be upset if your JavaScript didn't run on every page load. — Heretic Monkey
– Heretic Monkey, Commented Feb 25, 2018 at 5:09
so what you're saying is the browser doesn't re download them but still runs through them on each and every page view loaded? — chuckd
– chuckd, Commented Feb 25, 2018 at 5:10
Yeah, that's how browsers work. Check the network tab in your browser's developer tools; you should see the scripts loading either "(from cache)" or with a "304 Not Modified" response. If it didn't run them again, nothing would happen on the new page. — Heretic Monkey
– Heretic Monkey, Commented Feb 25, 2018 at 5:12
ok thanks Mike, I know this is a little off topic, but do you know how to speed up the load time of the site (both the initial page and each view after) in visual studio and Chrome. Visual Studio just takes so damn long to load up my site to debug it. ~30-60 secs. Maybe it has something to do with my machine!! MAcbook air '13 running VMWare with Win 10 and VS 2017. Should I just go out and buy a 4 core windows machine and see if it helps the load time to debug my site??? — chuckd
– chuckd, Commented Feb 25, 2018 at 5:16
Well, running VS in a VM is likely the culprit. I'd use VS Code directly on the Mac instead. Also, if you're debugging a remote server, everything's got to go over the network. — Heretic Monkey
– Heretic Monkey, Commented Feb 25, 2018 at 5:18

SaltySub2 · Accepted Answer · 2018-02-25 05:40:31Z

2

In ASP.Net MVC calling (returning) a View (reload or change of URL assuming standard routing) is considered a new “page” load.

For conventional web browsing AFAIK when a page loads ie. a typical http(s) request, the page has to load from top to bottom, including re-loading the JS and CSS.

Because a standard http request (eg. GET) is stateless, on the client side, the browser will use exactly the HTML, CSS and JS it is told to use. It cannot “guess” what JS you might want or not want to load.

The web browser would generally cache JS and CSS, assuming no “cache-busting” is being used.

To avoid reloading of the whole page, you can use AJAX techniques, or now a single-page-application approach: https://www.asp.net/single-page-application

edited Feb 25, 2018 at 5:40

answered Feb 25, 2018 at 5:24

SaltySub2

3092 silver badges6 bronze badges

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

Comments

PSK · Accepted Answer · 2018-02-25 05:35:16Z

1

If you are not using SPA or Partial view/page rendering, when you navigate from one view to another view a complete post back will happen and new content will be loaded to the DOM, in that case all the resources will be requested again by the page to the server. If the content like JS/Images/CSS is already cached, in that case content will not be loaded from server but from the cache, but complete JavaScript will execute again.

If you don’t want this to happen, go for partial page rendering or implement SPA.

You can read more about SPA here https://www.asp.net/single-page-application AND MSDN

edited Feb 25, 2018 at 5:35

answered Feb 25, 2018 at 5:20

PSK

18k5 gold badges35 silver badges44 bronze badges

18 Comments

chuckd Over a year ago

what's SPA and should I rebuild my site so that everything is a partial underneath, say, the navbar? So basically the whole site just fetches partials underneath some header area like the navbar???

SaltySub2 Over a year ago

@user1186050 Do see my answer above with the link regarding SPA in ASP.Net. Do also research AJAX in general. You have to think of two separate sides. On the server side you have views, partials, etc... but this delivers to the client a “full page” encapsulated in a typical http request so the client browser can deal with it properly. “Partials” on the browser side eg under the navbar means that content must be changed via “dynamic HTML” ie. manipulating the content of the DOM on the browser side. So the server delivers a whole “set” to the browser then the browser manipulates parts of it.

PSK Over a year ago

SPA is single page application, you don't need to rebuild your entire site again. MVC supports it using partial view rendering.

SaltySub2 Over a year ago

As per @PSK to clarify your server-side gives the “whole page” to the browser. Then the browser can make AJAX calls to the server which then delivers “partial pages” because AJAX calls don’t want a whole page, just little bits to change parts of the web page... if that makes sense.

chuckd Over a year ago

Hi Salty. I currently make lots of ajax calls to my server to get partial pages. I'm doing this with .load() calls. I just thought I'd ask about re doing my site with a single page application template, using angular or knockout. Not really sure which one, not familiar with either!!

|

Collectives™ on Stack Overflow

Why do my script bundles load with every page view in ASP.Net MVC?

2 Answers 2

Comments

18 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

18 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related