Главная > .NET, JavaScript > Вышел Bundle Transformer 1.6.5

Вышел Bundle Transformer 1.6.5

Логотипы библиотек Bundle Transformer, в которые были добавлены изменения в версии 1.6.5

Основным нововведением в новой версии Bundle Transformer стала поддержка языка TypeScript. Кроме того, были внесены изменения в ядро продукта и в следующие модули: BundleTransformer.MicrosoftAjax, BundleTransformer.Yui и BundleTransformer.Csso.

Рассмотрим основные нововведения данной версии:

Ядро

В BundleTransformer.Core появилась возможность отказаться от использования предварительно минимизированных файлов (например, файлы с расширениями *.min.css и *.min.js) и производить минимизацию кода исключительно средствами выбранного минимизатора. За включение/отключение использования предварительно минимизированных файлов отвечают атрибуты usePreMinifiedFiles конфигурационных элементов css и js. В следующем примере показан код, отключающий использование предварительно минимизированных файлов.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    ...
    <bundleTransformer 
        xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
        <core>
            <css usePreMinifiedFiles="false">
                ...
            </css>
            <js usePreMinifiedFiles="false">
                ...
            </js>
            ...
        </core>
        ...
    </bundleTransformer>
    ...
</configuration>

По умолчанию атрибутам usePreMinifiedFiles присвоены значения равные true.

Данная возможность пригодится тем разработчикам, которые хотят применить ко всему CSS- и/или JS-коду своего веб-приложения алгоритмы минимизации, обладающие наивысшей степенью сжатия. Но следует помнить, что некоторые JS-библиотеки не получится сжать без ошибок. Кроме того, объем сжимаемого кода увеличится, что приведет увеличению продолжительности минимизации на лету.

Трансляторы

Bundle Transformer: TypeScript

Модуль BundleTransformer.TypeScript содержит адаптер-транслятор TypeScriptTranslator, производящий трансляцию TypeScript-кода в JavaScript. Если вы еще ничего не слышали о TypeScript, то рекомендую вам прочитать следующие статьи: «TypeScript: язык для разработки больших приложений на JavaScript» Анатолия Ализара и «TypeScript для ASP.NET MVC 4 веб-приложений» Андрея Веселова.

Параметры компиляции TypeScript-кода можно настроить с помощью конфигурационной секции typeScript в файле Web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    ...
    <bundleTransformer 
        xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
        <typeScript useNativeMinification="false" useDefaultLib="true" 
            propagateConstants="false" errorOnWith="true"
            inferPropertiesFromThisAssignment="false" 
            codeGenTarget="EcmaScript3">
            <style bitwise="false" blockInCompoundStatement="false" 
                eqEqEq="false" forIn="false" emptyBlocks="true" 
                newMustBeUsed="false" requireSemicolons="false" 
                assignmentInConditions="false" eqNull="false" 
                evalOk="true" innerScopeDeclarationsEscape="true" 
                functionsInLoops="true" reDeclareLocal="true" 
                literalSubscript="true" implicitAny="false" />
        </typeScript>
        ...
    </bundleTransformer>
    ...
</configuration>

Названия и возможные значения большего количества свойств совпадают с конфигурационными свойствами исходного компилятора, поэтому я рассмотрю свойства, назначение которых может быть не очевидно:

  • useNativeMinification=«(true|false)«. Разрешает минимизацию генерируемого JS-кода средствами TypeScript-компилятора. При встроенной минимизации производится удаление пробельных символов и комментариев. Сжатый таким образом код уже не подвергается минимизации средствами модуля-минимизатора, поэтому использовать встроенную минимизацию следует только в случаях, когда по каким-то причинам использование модуля-минимизатора невозможно. Данное конфигурационное свойство управляет сразу двумя свойствами компилятора: minWhitespace и emitComments.
  • useDefaultLib=«(true|false)«. Разрешает загрузку в компилятор определений общих типов, объявленных в файле lib.d.ts. К общим типам относятся основные типы из ECMAScript, DOM и Windows Script Host.

Чтобы скомпилировать код TS-файла, в котором используются типы, объявленные в других файлах, вам необходимо добавить в код ссылки на эти файлы. Ссылки на файлы добавляются с помощью документирующих тегов <reference> (более подробную информацию о данном теге вы можете прочитать в статье «Облегчаем работу с JS- и CSS-кодом в Visual Studio»).

/// <reference path="jquery.d.ts" />
/// <reference path="TranslatorBadge.ts" />

/// <summary>
/// Creates colored badge for translator
/// </summary>
;class ColoredTranslatorBadge extends TranslatorBadge {
    public getTextColor(): string {
        /// <summary>
        /// Gets a text color of badge
        /// </summary>
        /// <returns type="String">
        /// Text color of badge
        /// </returns>
        return this.$linkElem.css("color"); 
    }

    public setTextColor(color: string): void {
        /// <summary>
        /// Sets a text color of badge
        /// </summary>
        /// <param name="color" type="String">
        /// Text color of badge
        /// </param>
        this.$linkElem.css("color", color);
    }

    public getBorderColor(): string {
        /// <summary>
        /// Gets a border color of badge
        /// </summary>
        /// <returns type="String">
        /// Border color of badge
        /// </returns>
        return this.$badgeElem.css("border-color");
    } 

    public setBorderColor(color: string) {
        /// <summary>
        /// Sets a border color of badge
        /// </summary>
        /// <param name="color" type="String">
        /// Border color of badge
        /// </param>
        this.$badgeElem.css("border-color", color);
    }
}

В приведенном выше коде с помощью документирующих тегов <reference> добавляются ссылки на файлы jquery.d.ts и TranslatorBadge.ts.

Минимизаторы

Bundle Transformer: Microsoft Ajax

В модуле BundleTransformer.MicrosoftAjax была обновлена библиотека Microsoft Ajax Minifier до версии 4.69.

Bundle Transformer: YUI

В BundleTransformer.Yui была обновлена библиотека YUI Compressor for .Net до версии 2.1.0.0.

Bundle Transformer: CSSO

В BundleTransformer.Csso (x86, x64) был обновлен код минимизатора CSSO до версии 1.3.4.

Реклама
  1. tstar
    13.10.2012 в 00:14

    Ой! Это ж о моей фиче (отказ от сжатых файлов) в самом начале говорится! 🙂 С каким трудом я объяснял на ломаном английском суть проблемы 🙂 Приятно. Спасибо огромное за труды! К стати, о производительности. Я правильно понимаю, что сжатие происходит только один раз при первом вызове скриптов? Или все таки для каждого запроса пережимается по новой и тогда это влияет на производительность?

    • 13.10.2012 в 00:38

      Tstar, нужно было readme.txt прочитать, там ссылка на мой сайт есть 🙂

      Трансформации (трансляция и минимизация) применяются к коду только при первом обращении к bundle`у, после чего обработанный код кэшируется в памяти сервера. При изменении файлов, входящих в bundle, элемент кэша становится недействительным и данный процесс запускается по новой.

  2. tstar
    13.10.2012 в 01:36

    readme.txt читаю, когда уже ничто не помогает 🙂
    Но хочу таки поделиться своим опытом. Когда появилась финальная версия новой студии, то Опера ну ни как не понимала родное сжатие от МС для jQuery скриптов. Пытался извратиться, удалив из сжатия jQuery и тупо подключив jQuery.min в тело страницы. Потом наткнулся на Вашу библиотеку и это оказалось настоящим спасением. Поставил по умолчанию YUICompressor и долго радовался, что все работает, пока в один момент не обновились библиотеки jQuery и другие. Почему-то все браузеры на отрез отказались понимать сжатые скрипты jQuery.min, которые идут в комплекте с библиотеками. Вот я и попросил опцию, что бы исключить *.min из сжатия и позволить YUICompressor самому все правильно пережать. Отличная опция, спасибо. Но счастье было не долгим. Обновление YUICompressor вообще все сломало. Новая версия не дружит с AntiForgery. Пришлось удалить YUICompressor и перепробовать почти все компрессоры. Я в шоке, только JSMin смог поджать скрипты, что бы все браузеры их поняли. Но по сути, JSMin только поудалял пробелы и не более, не видоизменив текста. Для CSS пробовал Microsoft Ajax и WebGrease. Оба справились со сжатием отлично, глюков не наблюдал. WebGrease смог поджать файлы немного лучше чем Microsoft Ajax, но про глюки WebGrease я в курсе. И вот я никак не могу понять. Это только мне так не везет со сжатием скриптов? Я столько времени убил на выяснение причин и попытки побороть эту проблему. Или у меня браузеры кривые?

    • 13.10.2012 в 12:13

      В моем проекте jquery-1.8.2.min.js из NuGet-пакета не вызывает никаких ошибок в Opera 12. Да и все JS-файлы (включая jquery-1.8.2.js) у меня нормально пожались с помощью последней версии BundleTransformer.Yui.

      Как вариант, ошибка у Вас появляется не из-за последней версии jQuery, а из-за какого-то jQuery-плагина.

      • tstar
        15.10.2012 в 14:35

        Если оставить сжатие скриптов по умолчанию, предлагаемое майкрософтом, то опера реально не работает, это известный баг http://forums.asp.net/t/1804878.aspx/1, самое обидное, что узнаешь об этом только на рабочем сервере, так как у разработчика выполняются не сжатые скрипты. Майкрософт пытается полностью пережать все скрипты, а Ваша библиотека пытается не пережимать, поэтому, с Вашей библиотекой опера работает, так как получает сжатый разработчиком библиотеки скрипт. А по поводу моих глюков. У меня нет никаких левых плагинов до появления ошибок, только jQuery, jQery-UI, Validate, на последнем уже вылетает ошибка, при использовании сжатых разработчиком скриптов. С пережатыми JSMin ошибок нет. От сюда делаю вывод, что все таки некорректно воспринимаются браузерами сильно оптимизированные скрипты последней версии jQuery.Validate и некоторых последующих, в моем случае, библиотек.

      • tstar
        15.10.2012 в 14:49

        И вот, к стати, решил на новой версии Bundle Transformer 1.6.6 проверить JS оптимизатор MicrosoftAjaxJsMinifier, и сразу же получаю эксепшен на первом же модуле jQuery.1.8.2: Необработанное исключение в строке 14, столбце 2 в http://localhost:54626/JS/Core?v=gCmvaw5NtwlxZLOtsZbpiDW2ZMM5peH45pvrPsUFU501

        0x800a138f — Ошибка выполнения Microsoft JScript: Предполагается наличие объекта

        И так со многими оптимизаторами, с той лишь разницей, что одни обламуются на первом же скрипте, другие могут чуть дальше продвинуться…

  3. 15.10.2012 в 13:29

    Почему-то вызов скриптов по пути «/Bundles/CommonStyles» инициирует вызов к действию CommonStyles контроллера Bundles. Что нужно сделать, чтобы получать содержимое скриптов/файлов стилей?

  4. 15.10.2012 в 15:57

    tstar :

    И так со многими оптимизаторами, с той лишь разницей, что одни обламуются на первом же скрипте, другие могут чуть дальше продвинуться…

    Как Вы понимаете эта проблема не в Bundle Transformer. Давно известно, что библиотеку jQuery может сжать не каждый минимизатор, поэтому и рекомендуется пользоваться предварительно минимизированными версиями.

    • tstar
      15.10.2012 в 16:02

      Я не обвиняю Bundle Transformer, наоборот, Bundle Transformer — это спасение в данной ситуации, она дает возможность выбора, причем легкую. И я премного благодарен за нее! Спасибо.

  5. 15.10.2012 в 16:27

    tstar :
    От сюда делаю вывод, что все таки некорректно воспринимаются браузерами сильно оптимизированные скрипты последней версии jQuery.Validate и некоторых последующих, в моем случае, библиотек.

    Насколько мне известно, ошибки могут возникать из-за несовместимости текущей версии Microsoft jQuery Unobtrusive Validation с последней версией jQuery Validation. Попробуйте откатить jQuery Validation до одной из предыдущих версий.

  6. 13.11.2012 в 15:24

    У вас не было проблем при работе с хаками в css? Пытался использовать MicrosoftAjaxCssMinifier на файлах с хаками, получил ошибку: «Browser hack generates invalid CSS». Можно ли как-то обойти это?

  7. 13.11.2012 в 19:30

    Александр, я бы на Вашем месте не использовал такие хаки для IE, а добавил бы в шаблоны следующую конструкцию:

    <!DOCTYPE html>
    <!—[if lt IE 7 ]> <html class="ie6 ielt8"> <![endif]—>
    <!—[if IE 7 ]> <html class="ie7 ielt8"> <![endif]—>
    <!—[if IE 8 ]> <html class="ie8"> <![endif]—>
    <!—[if IE 9 ]> <html class="ie9"> <![endif]—>
    <!—[if (gt IE 9)|!(IE)]><!—> <html> <!—<![endif]—>
    <head>

    </head>
    <body>
    </body>
    </html>

    И использовал бы в CSS вместо хаков классы:

    .ielt8
    {
    height: 100px;
    }

    • 13.11.2012 в 20:16

      Это-то ясно. Просто хотелось узнать есть ли другие пути.

      • 13.11.2012 в 20:27

        Если код не сжимается MicrosoftAjaxCssMinifier, то попробуйте другие CSS-минимизаторы:
        KryzhanovskyCssMinifier или YuiCssMinifier.

  8. 14.11.2012 в 10:52

    Действительно, Yui справился с задачей.
    Что нового в версии 1.6.7?

    • 14.11.2012 в 10:57

      Там же написано: «Release Notes:
      Added support of YUI Compressor for .NET 2.1.1.0.»

  1. No trackbacks yet.

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: