CSS 捆绑和 Internet Explorer 的限制答案

【问题标题】：CSS Bundling and Internet Explorer's LimitCSS 捆绑和 Internet Explorer 的限制
【发布时间】：2023-03-09 19:50:01
【问题描述】：

当我将 jquery ui 添加到包中时，我最终得到：

bundles.Add(new StyleBundle("~/Content/css").Include(
                            "~/Content/themes/base/jquery.ui.core.css",
                            "~/Content/themes/base/jquery.ui.resizable.css",
                            "~/Content/themes/base/jquery.ui.selectable.css",
                            "~/Content/themes/base/jquery.ui.accordion.css",
                            "~/Content/themes/base/jquery.ui.autocomplete.css",
                            "~/Content/themes/base/jquery.ui.button.css",
                            "~/Content/themes/base/jquery.ui.dialog.css",
                            "~/Content/themes/base/jquery.ui.slider.css",
                            "~/Content/themes/base/jquery.ui.tabs.css",
                            "~/Content/themes/base/jquery.ui.datepicker.css",
                            "~/Content/themes/base/jquery.ui.progressbar.css",
                            "~/Content/themes/base/jquery.ui.theme.css"

Internet explorer 有一个limit 将加载 31 个样式表，其中 jquery 占用了 12 个。添加 yui 重置、基础和字体我已经在 15 个样式表中，没有任何网站样式或插件样式表已加载。

显然，捆绑后一切正常，因为只生成了一个样式表。我的第一直觉是使用那些使用 @Import 但会导致捆绑到 fall over 或不缩小的那些。

除了更少的样式表之外，最好的解决方法是什么？ 我目前的解决方案是 #if DEBUG 构造，但有更好的方法吗？

#if DEBUG
     bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/themes/base/jquery.ui.all.css"));
#else
     bundles.Add(new StyleBundle("~/Content/css").Include(
                            "~/Content/themes/base/jquery.ui.core.css",
                            "~/Content/themes/base/jquery.ui.resizable.css",
                            "~/Content/themes/base/jquery.ui.selectable.css",
                            "~/Content/themes/base/jquery.ui.accordion.css",
                            "~/Content/themes/base/jquery.ui.autocomplete.css",
                            "~/Content/themes/base/jquery.ui.button.css",
                            "~/Content/themes/base/jquery.ui.dialog.css",
                            "~/Content/themes/base/jquery.ui.slider.css",
                            "~/Content/themes/base/jquery.ui.tabs.css",
                            "~/Content/themes/base/jquery.ui.datepicker.css",
                            "~/Content/themes/base/jquery.ui.progressbar.css",
                            "~/Content/themes/base/jquery.ui.theme.css"));
#endif

【问题讨论】：

标签： asp.net-mvc-4 bundling-and-minification

【解决方案1】：

如果您真的需要所有主题，只需在 DEBUG 和 RELEASE 模式中包含 jquery.ui.all.css。

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/themes/base/jquery.ui.all.css"));

这样，在 DEBUG 模式下，您会得到一个 CSS 文件，而在 RELEASE 模式下，您会得到一个带有缓存头的压缩 CSS 文件。

【讨论】：

缩小器不会遍历 @imports 以提供更大的 css 文件大小。