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>
2 answers
solution1
2 2018-02-25 05:24:48
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
solution2
1 2018-02-25 05:20:35
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.