为什么我的脚本包会在 ASP.Net MVC 中的每个页面视图中加载？答案

【问题标题】：Why do my script bundles load with every page view in ASP.Net MVC?为什么我的脚本包会在 ASP.Net MVC 中的每个页面视图中加载？
【发布时间】：2018-02-25 13:40:31
【问题描述】：

我有点困惑。我在下面有我的 _layout.cshtml 页面，它有一堆包含 .css 和 .js 文件的包。当我第一次加载站点时，它会遍历捆绑包中的每个文件。不错不错不错！但是在每个新视图上，每个文件的每一行代码都会再次运行！（例如 jQuery、bootstrap 等）我设置了断点来测试它，每次加载新视图时它们都会被击中。

我认为浏览器的全部目的是缓存这些文件，这样它们就不会在每次调用新视图时加载？我在这里缺少一些理解吗？我没有正确设置布局吗？它们是否没有被加载但代码正在运行（这就是为什么我的所有断点都被击中）每个新视图？

有没有办法设置它，这样就不会发生这种情况，并且当我的客户访问我的主页时，所有文件都会加载一次？我不明白为什么每个 .js 文件（例如 bootstrap）都会加载到每个加载的视图上！！

这是我的布局页面

<!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>

【问题讨论】：

浏览器会缓存它们。但是 JavaScript 必须经过解析和加载才能运行...如果您的 JavaScript 没有在每次页面加载时都运行，您会感到不安。
所以你的意思是浏览器不会重新下载它们，但仍然会在每个加载的页面视图上运行它们？
是的，这就是浏览器的工作方式。检查浏览器开发者工具中的网络标签；您应该看到脚本加载“（从缓存）”或“304 Not Modified”响应。如果它没有再次运行它们，新页面上不会发生任何事情。
好的，谢谢 Mike，我知道这有点离题，但是您知道如何在 Visual Studio 和 Chrome 中加快网站的加载时间（包括初始页面和之后的每个视图） . Visual Studio 只需要很长时间才能加载我的站点来调试它。 ~30-60 秒。可能和我的机器有关！！运行带有 Win 10 和 VS 2017 的 VMWare 的 MACbook air '13。我应该出去买一台 4 核 Windows 机器，看看它是否有助于加载时间来调试我的网站？？？
好吧，在 VM 中运行 VS 可能是罪魁祸首。我会直接在 Mac 上使用 VS Code。此外，如果您正在调试远程服务器，则一切都必须通过网络进行。

标签： javascript html asp.net-mvc scriptbundle

【解决方案1】：

在 ASP.Net MVC 中调用（返回）视图（重新加载或更改 URL 假设标准路由）被视为新的“页面”加载。

用于在页面加载时进行常规网页浏览 AFAIK，即。一个典型的 http(s) 请求，页面必须从上到下加载，包括重新加载 JS 和 CSS。

因为标准的 http 请求（例如 GET）是无状态的，所以在客户端，浏览器将完全使用它被告知要使用的 HTML、CSS 和 JS。它无法“猜测”你可能想要或不想加载的 JS。

网络浏览器通常会缓存 JS 和 CSS，假设没有使用“缓存清除”。

为避免重新加载整个页面，您可以使用 AJAX 技术，或者现在使用单页应用程序方法：https://www.asp.net/single-page-application

【讨论】：

【解决方案2】：

如果您不使用SPA 或Partial view/page rendering，当您从一个视图导航到另一个视图时，将发生完整的回发，并且新内容将加载到 DOM，即如果页面将再次向服务器请求所有资源。如果像JS/Images/CSS 这样的内容已经被缓存了，在这种情况下，内容不会从服务器加载，而是从缓存中加载，但完整的 JavaScript 会再次执行。

如果您不希望发生这种情况，请进行部分页面渲染或实现SPA。

您可以在此处阅读更多关于 SPA 的信息 https://www.asp.net/single-page-application 和 MSDN

【讨论】：

什么是 SPA，我是否应该重建我的网站，以便一切都在下面，比如导航栏？所以基本上整个网站只是在导航栏之类的标题区域下面获取部分内容???
@user1186050 请参阅上面关于 ASP.Net 中 SPA 的链接的答案。一般来说，也要研究 AJAX。你必须考虑两个不同的方面。在服务器端，您有视图、部分视图等……但这会向客户端提供一个封装在典型 http 请求中的“完整页面”，以便客户端浏览器可以正确处理它。浏览器端的“部分”，例如在导航栏下，意味着必须通过“动态 HTML”来更改内容，即。在浏览器端操作 DOM 的内容。因此，服务器向浏览器提供一个完整的“集合”，然后浏览器操作其中的一部分。
SPA 是单页应用程序，您无需重新构建整个站点。 MVC 支持使用局部视图渲染。
根据@PSK 澄清您的服务器端将“整个页面”提供给浏览器。然后浏览器可以对服务器进行 AJAX 调用，然后服务器提供“部分页面”，因为 AJAX 调用不需要整个页面，只需要一点点来更改网页的某些部分......如果这有意义的话。
嗨，咸的。我目前对我的服务器进行大量 ajax 调用以获取部分页面。我正在使用 .load() 调用来执行此操作。我只是想我会询问是否使用单页应用程序模板重新制作我的网站，使用角度或敲除。不太清楚是哪一个，两个都不熟悉！！