Вставка CSS на страницу макета ASP.NET MVC при сборке в Visual Studio

У меня есть проект ASP.NET MVC в Visual Studio 2013.

Я хотел бы автоматически вставлять содержимое минимизированной таблицы стилей CSS (минимизированной с использованием расширения Web Essentials VS) в тег стиля на странице макета MVC при создании проекта.

РЕДАКТИРОВАТЬ - это необходимо для уменьшения эффектов блокировки рендеринга в верхней части страницы при первой загрузке (см. Оптимизировать доставку CSS)

Как я могу это сделать?


person Graham    schedule 08.06.2015    source источник
comment
Из любопытства, зачем он нужен непосредственно перед сборкой? Есть ли особая причина, по которой вы не можете просто вручную разместить тег <link> в заголовке документа?   -  person Marco    schedule 08.06.2015
comment
Это требование оптимизации. Содержимое стиля предназначено исключительно для содержимого, отображаемого в верхней части страницы, и его необходимо разместить в заголовке страницы, чтобы уменьшить количество HTTP-запросов. В выпускной версии страницы содержимое этого тега стиля минимизировано, и редактировать его вручную, если требуются изменения, является проблемой. Следовательно, было бы очень полезно вставлять контент прямо из минифицированного файла в JS.   -  person Graham    schedule 08.06.2015


Ответы (2)


На случай, если кто-то все еще ищет ответ.

Я создал помощника HTML, как показано ниже:

public static class CriticalCssHelper
{
    public static MvcHtmlString CriticalCss(this HtmlHelper html, params string[] paths) 
    {
        var style = new TagBuilder("style");

        foreach (var path in paths)
        {
            var filePath = HttpContext.Current.Server.MapPath(path);
            style.InnerHtml = File.ReadAllText(filePath);
        }

        return new MvcHtmlString(style.ToString());
    }
}

И в вашем файле * .cshtml вы можете просто использовать это так:

@Html.CriticalCss("~/Content/css/CriticalCss/layout.min.css")

PS. Это также может помочь в оптимизации скорости страницы: Минимизировать HTML вывод из приложения ASP.Net MVC (немного не по теме, но связан, поскольку он также минимизирует встроенный CSS)

person Aldracor    schedule 09.02.2016

Вы можете попробовать использовать функцию минификации в ASP.NET 4.5

В папке App_Start добавьте класс BundleConfig.cs, чтобы указать расположение файлов CSS:

public class BundleConfig
{
  public static void RegisterBundles(BundleCollection bundles)
  {
     //For Css
     bundles.Add(new StyleBundle("~/Content/BundlesCSS").Include(
                        "~/Content/mycss1.css",
                        "~/Content/mycss2.css"));
  }
}

И в View добавьте эту строку кода для рендеринга CSS:

<%:Styles.Render("~/Content/BundlesCSS")%>

Вы также можете отключить эту функцию во время разработки, установив значение атрибута debug в файле Web.config:

<system.web>
    <compilation debug="true" />
</system.web>

См. Дополнительные сведения: Объединение и минификация

person Minh Nguyen    schedule 03.11.2015
comment
Минификация через объединение - не то, что мне нужно. См. Второй комментарий к исходному сообщению (8 июня, 13:28) - person Graham; 04.11.2015
comment
@Graham: не рекомендуется встраивать содержимое CSS в файл html, поскольку это увеличивает размер страницы html каждый раз, когда пользователь запрашивает эту страницу. Разделив файлы CSS в другой запрос, вы можете уменьшить размер HTML, а также получить выгоду от кеширования файлов CSS в последующих запросах. - person Minh Nguyen; 04.11.2015
comment
Это не совсем так. Добавление критического CSS в HTML уменьшит количество HTTP-вызовов при начальной загрузке, что означает, что страница будет загружаться быстрее. См. Рекомендации Google PageSpeed ​​для получения дополнительной информации. - person Graham; 09.02.2016