向 C# 脚本和 css 包添加其他文件答案

【问题标题】：Adding additional files to C# script and css bundles向 C# 脚本和 css 包添加其他文件
【发布时间】：2017-08-17 23:19:54
【问题描述】：

好的，所以我一直在使用 C# 捆绑来缩小和组合脚本和 css。

但我不确定如何将脚本附加到已经创建的包中。

我正在尝试附加到捆绑包，因为并非所有脚本都在同一个文件中，因为我正在使用 Visual Studio 中的 nopcommerce 解决方案。所以脚本被添加到整个解决方案中。

这是捆绑代码：

bundles.Add(new ScriptBundle("~/Content/themes/base/js/scripts/footeroptimized").Include(
    "~/Themes/MyTheme/Content/js/bootstrap.min.js",
    "~/Scripts/jquery.validate.min.js",
    "~/Scripts/jquery.validate.unobtrusive.min.js",
    "~/Scripts/public.common.min.js",
    "~/Themes/MyTheme/Content/js/readmore.min.js"));

我想也许我可以使用 bundles .Add() 函数，但我得到一个错误：

 bundles.Add("~/Themes/MyTheme/Content/js/global.min.js"));

错误是：“无法从字符串转换为 system.web.optimization.bundle”

我找不到任何解释我为什么会收到该错误的信息。

我还添加了用于优化的 using 语句@using System.Web.Optimization;

任何人都知道如何添加到已经创建的包中。

更新：

我也尝试了以下方法，但它不起作用：

var footerScriptBundle = new ScriptBundle("~/Content/themes/base/js/scripts/footeroptimized");
footerScriptBundle.Include(
    "~/Themes/MyTheme/Content/js/bootstrap.min.js",
    "~/Scripts/jquery.validate.min.js",
    "~/Scripts/jquery.validate.unobtrusive.min.js",
    "~/Scripts/public.common.min.js",
    "~/Themes/MyTheme/Content/js/readmore.min.js");

footerScriptBundle.Include("~/Themes/MyTheme/Content/js/global.min.js");

干杯

【问题讨论】：

您何时尝试将新脚本添加到捆绑包中？捆绑注册只发生一次。在第一次创建它之后修改它是没有意义的。为什么编译时不知道 bundle 的内容应该是什么？
@ErikE 我要创建的捆绑包的内容位于 nopcommerce 解决方案中的多个文件中。所以有些文件在插件中，有些在 nop.web 所以文件到处都是。
文件的位置与什么有什么关系？为什么不能在一个地方指定所有文件？在第一次创建 ScriptBundle 的同时添加global.min.js。
@ErikE 是因为有些文件只加载在某些页面上，所以主页上有一个滑块。然后在主页上加载该滑块的 css 和脚本文件，在所有页面上加载这些文件是没有意义的。

标签： javascript c# css optimization minify

【解决方案1】：

您描述的用例不适用于捆绑包。您不能在运行时修改捆绑包，即使可以，这样做也没有任何意义。

考虑一下。您访问一个页面，并请求和接收浏览器缓存的捆绑包abc.js。然后，您访问另一个页面，该页面也要求abc.js，只是您希望内容有所不同。除此之外，浏览器不会请求文件，并且会重用旧文件，因为它已被缓存。捆绑包是为了避免在许多页面中发送总是需要一起发送的文件。

如果您确实需要捆绑其他文件，那么您需要将不同的文件放入自己的捆绑包中并在每个页面上请求两个捆绑包，或者为每个不同的场景创建一个捆绑包，一个包含所有基本文件的捆绑包加上特定于站点区域的文件。

但是，如果只需要一个附加文件，并且您尝试添加到捆绑包中的文件仅在一个页面上使用，那么您做错了。该文件根本不属于捆绑包！只需像往常一样使用普通的<script> 或<link> 标签即可。即使您有多个文件，如果它们只在一个页面上使用，也许您可以将它们组合成一个（未捆绑的）文件。或者按照上面的建议，为这几个文件制作一个特殊的包，并将其作为第二个单独的包包含或不包含。

浏览器必须请求两个对象（一个包以及一个特定于页面的 javascript 或第二个包）的额外开销并没有那么大。你不会从尝试以这种方式构建捆绑包中获得太多价值，这样做会令人头疼，令人头疼。不要那样做。

有一天，使用 HTTP 2.0，我们可能会忘记捆绑，因为浏览器可能会通过单个请求请求多个文件，然后在单个响应中接收所有答案。那时，缩小仍然很重要，但我们将完全放弃捆绑包，因为它们的好处将完全通过协议本身实现。仍然可能有多个请求，按照可以从何处为请求提供服务的方式进行拆分，例如，一个请求针对可以从 CDN 提供的所有静态内容（图像、视频、样式表、javascript 等），一个请求适用于所有动态内容。

【讨论】：

感谢 ErikE 的精彩解释。这似乎是有道理的。我会在一两个星期内不回答这个问题，以防万一有人遇到过这样做的方法。感谢您的帮助 m8 :)

【解决方案2】：

因为我在研发之间丢失了这个问题的 URL，所以我在 MSDN 博客上留下了回复（所以下面的 txt 不是侵犯版权）。
https://blogs.msdn.microsoft.com/rickandy/2012/08/14/adding-bundling-and-minification-to-web-forms/#comment-47175

在 MasterPage 中包含文件的原因是在与它们相关的一个地方有公共文件是合理的，但这可能为其他目的提供解决方案：
顺便说一句，它本质上不必在 global.asax 中注册。我喜欢在 MasterPage 中有捆绑文件的 url 列表（在一个地方有相关的东西），所以我滥用了:) BundleConfig 中名为“IsRegistered”的静态布尔值？初始化为 false 然后在 RegisterBundles 中检查它（如果返回 true），否则将其设为 true 并进行注册。现在在您的 BundleConfig 中有 2 个其他方法作为 RenderJS 和 RenderCSS（它们调用主要的 Styles.Render 和 Scripts.Render）但在渲染之前这些方法调用 RegisterBundles 方法（如 PreRender 事件）因此现在在注册的命名空间中派生 2 个控件作为 TagPrefix，控件是接受 Src 和 Href 的 JSBundle 和 CSSBundle，它们的设置器将路径添加到 BundleConfig 中的其他 2 个数组（唯一）。最后，RegisterBundles 使用数组包含在包中。现在，我可以从 Master.cs 甚至在 master 本身中添加文件，但只能在渲染时间之前而不是 Application_Start
在 master 中调用这个：

private static bool IsRegistered = false;
//...
public static System.Web.IHtmlString RenderJS(params string[] paths) {
    if (!IsRegistered)
        RegisterBundles();
    return Scripts.Render(paths);
}

并检查 RegisterBundles 中的注册状态：

public static void RegisterBundles() {
    if (IsRegistered)
        return;
    IsRegistered = true;
    //...;
}

唯一添加文件：

private static string[] CSSPths
    , JSPths;
public static void AddJS(params string[] pths) {
    if (JSPths == null)
        JSPths = new string[0];
    JSPths = MyNameSpace.Arrays.Merge(JSPths, pths
        .Select(elm => "~/" + elm.TrimStart('~', '/'))
        .Except(JSPths).ToArray());
}

编辑：
哈哈，我们可以通过 UserControls 的 OnInit 事件（例如 NavBar 或菜单）将文件添加到包中

【讨论】：