Как я могу автоматически сжать и минимизировать файлы JavaScript в приложении MVC ASP.NET?

На самом деле есть гораздо более простой способ использовать Web Deployment Projects (WDP). WDP будет управлять сложностью инструмента aspnet__compiler и aspnet__merge . Вы можете настроить процесс с помощью пользовательского интерфейса внутри Visual Studio.

Что касается сжатия файлов js, вы можете оставить все свои файлы js на месте и просто сжать эти файлы в процессе сборки. Итак, в WDP вы должны объявить что-то вроде этого:

<Project>
   REMOVE CONTENT HERE FOR WEB

<Import 
  Project="$(MSBuildExtensionsPath)\MSBuildCommunityTasks\MSBuild.Community.Tasks.Targets" />
<!-- Extend the build process -->
<PropertyGroup>
  <BuildDependsOn>
    $(BuildDependsOn);
    CompressJavascript
  </BuildDependsOn>
</PropertyGroup>

<Target Name="CompressJavascript">
  <ItemGroup>
    <_JSFilesToCompress Include="$(OutputPath)Scripts\**\*.js" />
  </ItemGroup>
  <Message Text="Compresing Javascript files" Importance="high" />
  <JSCompress Files="@(_JSFilesToCompress)" />
</Target>
</Project>

Здесь используется задача JSCompress MSBuild из Задачи сообщества MSBuild , которая, как мне кажется, основана на JSMin.

Идея в том, чтобы оставить все ваши js-файлы такими, какие они есть (т. Е. Доступны для отладки / чтения) . Когда вы создаете свой WDP, он сначала копирует файлы js в OutputPath , а затем вызывается цель CompressJavascript для минимизации файлов js. Это не изменяет ваши исходные исходные файлы, а только те, которые находятся в выходной папке проекта WDP. Затем вы развертываете файлы в выходном пути WDP, который включает предварительно скомпилированный сайт. Я описал этот точный сценарий в своей книге (ссылка под моим именем) .

Вы также можете позволить WDP обрабатывать создание виртуального каталога, просто установите флажок и введите имя виртуального каталога. каталог.

Для некоторых ссылок на MSBuild:

• Внутри MSBuild
• 7 шагов к MSBuild
• MSDN MSBuild Docs

Сайед Ибрагим Хашими

Моя книга: Внутри Microsoft Build Engine: Использование MSBuild и Team Foundation Build

Скотт Хансельман недавно написал в блоге о объединении и перемещении скриптов в статические файлы , в основном с использованием ScriptManager со ссылками на CompositeScript и Атрибут пути :

<asp:ScriptManager runat="server">
    <CompositeScript path="http://www.example.com/1.js">
        <Scripts>
            <asp:ScriptReference />
            <asp:ScriptReference />
            <!-- etc. -->
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

С точки зрения минимизации статических файлов вам, вероятно, придется (и следует) использовать инструменты минимизации во время сборки / развертывания.

As others have suggested, you'd be best off creating a static minified build. Alternatively, there's a version of YUICompressor available for .NET here: http://www.codeplex.com/YUICompressor

Я написал кое-что, чтобы решить эту проблему автоматически. Он использует компилятор закрытия Google. Вы можете прочитать код здесь:

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure- Compiler.aspx

Спасибо

Guido

На http://www.drasticdata.nl есть несколько интересных графических приложений на основе флэш-памяти и карт treemap. Иерархическая гистограмма или динамическая карта может представлять интерес для вашей задачи.

я нашел более простое решение, просто добавьте к ссылке поведение щелчком мыши:

onclick='return false;'

ваши ссылки автоматически изменятся на target = «_ self» .

но если вы хотите перейти к другому целевому объекту или удалить атрибут с помощью pheraps, следует добавить прослушиватель и заменить javascript следующим образом:

  GEvent.addListener(map,"infowindowprepareopen", function(iwtabs) {
  iwtabs[0].contentElem.innerHTML = iwtabs[0].contentElem.innerHTML.replace("_blank", "_parent");
  });

это очень полезно для использования при наличии ссылки на lightbox (или подобной) внутри окна infowindow.

ура

Можно использовать MvcContribut.IncludeHandling. Он:

• поддерживает CSS и JS
• Объединяет в один запрос
• Minifies
• Gzip/Deflate сжимает
• Наборы заголовки кэша
• Использует методы расширения HTMLHelper для регистрации включает в себя, чтобы затем объединить их во время выполнения
• Устанавливается через IoC

в разделе

MvcContrib.IncludeHandling хорошо подходит для этой ситуации. В этом примере у меня есть Модель с набором стилей (строка). Также, если мне нужно добавить пользовательский стиль / JS на страницу, это тоже можно сделать. {{ 1}} Затем вызов Html.RenderCss объединяет все стили / js в один файл и минимизирует его.

<head>
<% foreach (var styleSheet in Model.Styles) {%>
<% Html.IncludeCss(styleSheet)); 

<% } %>
<% Html.IncludeCss("~/Scripts/jquery.1.4.2.js")); 

<%= Html.RenderCss() %>
</head>

То же самое для javascript.

<%
Html.IncludeJs("~/scripts/ConsoleLogger.js");
Html.IncludeJs("~/scripts/jquery.log.js");
Html.IncludeJs("~/Scripts/2010.1.416/jquery.validate.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.calendar.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.datepicker.js");
Html.IncludeJs("~/scripts/jquery.ui.datepicker-en-GB.js");
%>

Когда это передается клиенту, результат выглядит следующим образом (минифицированный объединенный 1 файл)

<link rel='stylesheet' type='text/css' href='/include/css/-QdUg9EnX5mpI0e4aKAaOySIbno%40'/>

API также предлагает флаг отладки, который при включении не минимизирует и не объединяет сценарии при установке, что очень полезно.

За считанные минуты я перешел от оценки Ислоу от F к B (с 24 скриптов до 2) ... Замечательно! И падение 40кбс.

Очевидным недостатком является то, что сервер выполняет сжатие на лету. Я думаю, что есть варианты кеширования комбинированного сценария на определенный период, которые быстро решат эту проблему.