如何为每个控制器操作/视图捆绑不同的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. 对每个视图重复

这是事情变得无聊的地方，因为你需要为每个视图重复这个。