如何为每个控制器 action/view 捆绑不同的 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）。

2. 创建您的捆绑包 view1.js

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

bundleconfig.json 看起来像这样：

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

3. 对每个视图重复

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