如何为每个控制器操作/视图捆绑不同的 js 和 css 文件？

Question

我有一个站点范围的 js 文件 (site.js)，每个请求都会输出。

我在控制器上有 2 个动作：Action1 和 Action2。这些动作中的每一个都有一个视图。每个视图都引用了一个特定于视图的 js（action1.js 和 action2.js）。

我想在 Action1 方法执行时将 site.js 与 action1.js 捆绑在一起。而当 Action2 方法时，我想将 site.js 与 action2.js 捆绑在一起。

捆绑应该在构建时完成。

.Net Core 1.x 可以做到这一点吗？

Answer 1

这是可能的，但是涉及很多琐碎的工作，因为您需要手动描述每个视图的捆绑包。

您需要知道的一切都可以在the official documentation 中找到，但这里是它的要点：

1. Action1.cshtml

我假设出于调试目的，您希望将这两个文件都包含在您的开发盒中，而您只希望将捆绑包用于生产。在您看来，您添加了以下标签：

<environment names="Development">
    <script src="site.js"></script>
    <script src="action1.js"></script>
</environment>
<environment names="Staging,Production">
    <script src="view1.js" asp-append-version="true"></script>
</environment>

在开发中，您的两个文件将按原样包含，而在生产中，将包含捆绑文件view1.js。

asp-append-version 是缓存破坏机制的一部分：它将文件的版本附加到对该文件的每个请求（详细信息here）。

1. 创建您的捆绑view1.js

创建捆绑包有多种可能性，但它们都围绕bundleconfig.json 文件。最简单的解决方案是使用BuildBundlerMinifier NuGet 包，只需将其添加到项目中即可。

bundleconfig.json 看起来像这样：

[
  {
    "outputFileName": "wwwroot/js/view1.js",
    "inputFiles": [
      "wwwroot/js/site.js",
      "wwwroot/js/action1.js"
    ]
  },
]

1. 对每个视图重复

这就是事情变得无聊的地方，因为您需要为每个视图重复此操作。