Объединение и минимизация без ASP.NET MVC

Ответ 1

Абсолютно возможно использовать связывание и минимизацию в пустом проекте.

• Используйте Nuget для установки пакета: Install-Package Microsoft.AspNet.Web.Optimization

• Создайте класс BundleConfig и определите свои пакеты:

  using System.Web.Optimization;
  public class BundleConfig
  {
      public static void RegisterBundles(BundleCollection bundles)
      {
          bundles.Add(new ScriptBundle("~/bundles/js").Include(
                    "~/Scripts/*.js"));
          bundles.Add(new StyleBundle("~/bundles/css").Include(
                     "~/Styles/*.css")); 
      } 
  }
  

• Зарегистрируйте класс BundleConfig в начале приложения в global.asax

  void Application_Start(object sender, EventArgs e)
  {
      BundleConfig.RegisterBundles(BundleTable.Bundles);
  }
  

• ссылаются на пакеты в вашем HTML-документе.
• Включить связывание, отключив режим отладки.

Ответ 2

В дополнение к приведенным выше ответам я хотел бы упомянуть, что был забыт один важный шаг:

После того, как вы установили пакет NuGet для Microsoft.AspNet.Web.Optimization и зарегистрировали пакеты в Global.asax(как описано в Claies answer), вам нужно добавить методы визуализации для стилей и скриптов следующим образом:

<%= Styles.Render("~/bundles/css") %>
<%= Scripts.Render("~/bundles/MattsUIBundle/js") %>

Это нужно добавить в раздел заголовка страницы ASPX, чтобы отобразить ранее добавленные на страницу пакеты "~/bundles/js" и "~/bundles/css". Без этого он не появится (см. для чего мне нужен рендер?). Для этого требуется добавить

<%@ Import Namespace="System.Web.Optimization" %>

на строку 2 вашей страницы, чтобы зарегистрировать пространство имен, предположив, что вы уже добавили пакет NUGET Microsoft.AspNet.Web.Optimization в свой код.

Если вы хотите включить больше связанных файлов, сделайте это как

void Application_Start()
{
    BundleCollection bundles=BundleTable.Bundles;
    var jsMattsUIBundle = new ScriptBundle("~/bundles/MattsUIBundle/js");
    jsMattsBundle.Include("~/Scripts/lib/jquery.min.js");
    jsMattsBundle.Include("~/Scripts/lib/jquery-ui.custom.min.js");
    jsMattsBundle.Include("~/Scripts/lib/jquery.watermark.min.js");
    bundles.Add(jsMattsBundle);
}

или более просто

    jsMattsBundle.Include("~/Scripts/lib/jquery.min.js",
            "~/Scripts/lib/jquery-ui.custom.min.js",
            "~/Scripts/lib/jquery.watermark.min.js");

Это объединит все 3 скрипта в виртуальном пути "~/bundles/MattsUIBundle/js".

Важно: Связывание проверяет, находитесь ли вы в режиме отладки или в режиме деблокирования. Оптимизации применяются только в том случае, если удалить флаг отладки в web.config

<compilation debug="true" />

или если вы явно определяете внутри Application_Start, который хотите оптимизировать независимо от того, находитесь ли они в режиме отладки:

BundleTable.EnableOptimizations = true;

Аналогично, если вы используете поддержку CDN, включите его через

BundleTable.Bundles.UseCdn = true;   //enable CDN support

который позволит вам объявить

var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/jquery",
            jqueryCdnPath).Include("~/Scripts/jquery-{version}.js"));

Примечание, что CDN будет использоваться только в режиме деблокирования. Следующий script гарантирует, что локальная копия jQuery будет загружена, если сбой загрузки CDN:

    <%= Scripts.Render("~/bundles/jquery") %>
    <script type="text/javascript">
        if (typeof jQuery == 'undefined') {
            var e = document.createElement('script');
            e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
            e.type = 'text/javascript';
            document.getElementsByTagName("head")[0].appendChild(e);
        }
    </script> 

предполагая, что вы предоставляете локальную копию jQuery 1.7.1 в "~/Scripts".

Примечание: В MVC Razor синтаксический рендеринг выполняется в представлении следующим образом:

@Scripts.Render("~/bundles/MattsUIBundle/js") 
@Styles.Render("~/bundles/css") 

Более подробную информацию можно найти здесь.

Ответ 3

Чтобы увеличить скорость загрузки файлов в вашем SPA, вам потребуется ручное время в настройке. Ответ неправильный - это реализовать Razor, особенно если ваша цель состояла в том, чтобы держаться подальше от MVC и его друзей (что хорошо, если ваша цель - это AngularJS SPA). Когда вы реализуете инфраструктуру оптимизации, упомянутую в других ответах, теперь вам нужно нажать на "Механизм просмотра", чтобы выстроить файлы CSHTML, что является заметным ударом вашей скорости, вероятно, больше, чем вы думаете, что вы сохраняете.

Так, как я уже сказал, вам нужно время разработчика, чтобы свести к минимуму файлы. Вам придется вручную отправить их на CDN, который у вас есть (или нужно настроить). Затем вы можете ссылаться на свой собственный CDN с вашими собственными пакетами, настроенными вашей командой, и что CDN будет кэшироваться браузерами пользователей.

Затем, когда один или несколько ваших SPA должны указывать на обновленный HTML/CSS/JS, вы увеличиваете версию CDN в этом SPA-приложении. Другие приложения SPA могут даже остаться прежними со старой версией (хотя я рекомендую попробовать придерживаться CDN последней версии). И пользовательские браузеры распознают новую версию CDN и вытаскивают новую версию в кеш.

Ответ 4

@Matt, на самом деле вам не нужно добавлять

<%@ Import Namespace="System.Web.Optimization" %>
<%= Styles.Render("~/bundles/css") %>
<%= Scripts.Render("~/bundles/MattsUIBundle/js") %>

И вам не нужен шаблон CSHTML. Вы можете ссылаться на свои пакеты таким образом со страницы html:

<link href="bundles/css" rel="stylesheet"/>
<script src="bundles/MattsUIBundle/js"></script>

Он сохранит вашу страницу из View Engine.

Ответ 5

Вы можете использовать YUI или Google Clouser Mapper

Это пример того, как пользователь YUI с Visual Studio

http://peronnemyr.wordpress.com/2012/09/26/using-yui-compressor-for-net-integrated-to-builds-in-visual-studio-2010/

Эта ссылка имеет расширения Visual Studio http://visualstudiogallery.msdn.microsoft.com/5469b7e2-90d7-4f54-b299-ae47e26323e6

Пользователь JSMIN http://www.crockford.com/javascript/jsmin.html

Вы можете запустить JsMin в качестве события после сборки, как показано ниже jsmin < "$ (ProjectDir)\debug.js" > "$ (ProjectDir)\min.js"

Это ссылка, как запустить JSMIN http://jasonfaulkner.com/RunJSMinInVisualStudio.aspx

Если это ответили на ваш вопрос, пожалуйста, проверьте право на левой стороне.

Ответ 6

Вы также можете использовать VS extention "Минимизация WebEssentials" , которая может минимизировать ваши файлы js/css независимо от компиляции проекта (так что вам не нужны никакие зависимой от dll третьей стороны). Он также имеет соединение, очень удобно.