Автоматическая минимизация CSS и JavaScript файлов

Одним из способов уменьшения времени загрузки страниц веб-сайтов является уменьшение CSS и JavaScript файлов.

Каким способом это можно сделать?

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

Для минимизации CSS и JavaScript файлов существует огромное множество инструментов. Но одним из наилучших на мой взгляд, является YUI Compressor от компании Yahoo.

YUI Compressor позволяет сократить размер CSS и JavaScript файлов на 40-60%. YUI Compressor написан на языке Java и для своего запуска требует виртуальную машину Java (версии >= 1.4).

При работе с Visual Studio будет немного неудобно использование данного инструмента, поэтому был создан порт данного минимайзера для платформы .NET – YUI Compressor for .NET.

Основные возможности YUI Compressor for .NET:

  • YUI Css сжатие.
  • YUI JavaScript сжатие.
  • Интеграция с Visual Studio post-build событиями. По этому адресу можно найти более подробную инструкцию.
  • MSBuild таски, могут быть использованы в решении Web Deployment Project.
  • MSBuild таски, также могут собирать все сжатые файлы в один (aka. файла объединения).
  • Возможность обработки, различных типов кодировки (например Unicode) и ThreadCulture.
  • Может обрабатывать групповые задачи (например *. JS).

Для быстрого подключения YUI Compressor к проекту добстаточно добавить в проект файл MSBuild.xml и прописать путь к нему в post-build event.

yiu_compress_post_build

Пример простейшей задачи минимизации файлов в MSBuild файле:

<?xml version="1.0" encoding="utf-8"?>
<Project xmlns="http://schemas.microsoft.com/developer/MsBuild/2003">
    <UsingTask
        TaskName="CompressorTask"
        AssemblyFile="..\..\Projects\Yahoo.Yui.Compressor\Model\bin\Debug\Yahoo.Yui.Compressor.dll" />
    <!-- The .NET 2.0 version of the task .. and yes .. that's Model.Net20 folder listed twice .. i know i know...
    <UsingTask
        TaskName="CompressorTask"
        AssemblyFile="..\..\Projects\Yahoo.Yui.Compressor\Model.Net20\Model.Net20\bin\Debug\Yahoo.Yui.Compressor.NET20.dll" />
    -->

    <!-- Define the output locations. These can be set via the msbuild command line using
         /p:CssOutputFile=$(TargetDir)../whatever...
         /p:JavaScriptOutputFile=$(TargetDir)../whatever...

         If they are not supplied or are empty, then we the value whatever is supplied, below.
    -->
    <PropertyGroup>
        <CssOutputFile Condition=" '$(CssOutputFile)'=='' ">SylesSheetFinal.css</CssOutputFile>
        <JavaScriptOutputFile Condition=" '$(JavaScriptOutputFile)'=='' ">JavaScriptFinal.css</JavaScriptOutputFile>
    </PropertyGroup>

    <Target Name="MyTaskTarget">
        <!--
            ItemGroup\CssFiles or ItemGroup\JavaScriptFiles: add zero to many files you wish to include in this compression task.
            Don't forget, you can use the wildcard (eg. *.css, *.js) if you feel up to it.
            Finally, at least one item is required - either a css file or a js file.

            CssFiles/JavaScriptFiles data format: Please do not touch this.
            DeleteCssFiles: [Optional] True | Yes | Yeah | Yep | True | FoSho | Fo Sho. Default is False. Anything else is False. (eg. blah = false, xxxx111 = false, etc)
            CssCompressionType: YuiStockCompression | MichaelAshsRegexEnhancements | HaveMyCakeAndEatIt or BestOfBothWorlds or Hybrid; Default is YuiStockCompression.
            ObfuscateJavaScript: [Optional] refer to DeleteCssFiles, above.
            PreserveAllSemicolons: [Optional] refer to DeleteCssFiles, above.
            DisableOptimizations: [Optional] refer to DeleteCssFiles, above.
            EncodingType: [Optional] ASCII, BigEndianUnicode, Unicode, UTF32, UTF7, UTF8, Default. Default is 'Default'.
            DeleteJavaScriptFiles: [Optional] refer to DeleteCssFiles, above.
            LineBreakPosition: [Optional] the position where a line feed is appened when the next semicolon is reached. Default is -1 (never add a line break).
            0 (zero) means add a line break after every semicolon. (This might help with debugging troublesome files).
            LoggingType: None | ALittleBit | HardcoreBringItOn;  Hardcore also lists javascript verbose warnings, if there are any (and there usually is :P ).
            ThreadCulture: [Optional] the culture you want the thread to run under. Default is 'en-gb'.
            IsEvalIgnored: [Optional] compress any functions that contain 'eval'. Default is False, which means a function that contains 'eval' will NOT be compressed. It's deemed risky to compress a function containing 'eval'. That said, if the usages are deemed safe this check can be disabled by setting this value to True.
        -->
        <ItemGroup>
            <!-- Single files, listed in order of dependency -->
            <CssFiles Include="StylesheetSample1.css"/>
            <CssFiles Include="StylesheetSample2.css"/>
            <CssFiles Include="StylesheetSample3.css"/>
            <CssFiles Include="StylesheetSample4.css"/>

            <JavaScriptFiles Include="jquery-1.3.2.js"/>

            <!-- All the files. They will be handled (I assume) in alphabetically. -->
            <!-- <CssFiles Include="*.css" />
            <JavaScriptFiles Include="*.js" />
            -->
        </ItemGroup>
        <CompressorTask
            CssFiles="@(CssFiles)"
            DeleteCssFiles="false"
            CssOutputFile="$(CssOutputFile)"
            CssCompressionType="YuiStockCompression"
            JavaScriptFiles="@(JavaScriptFiles)"
            ObfuscateJavaScript="True"
            PreserveAllSemicolons="False"
            DisableOptimizations="Nope"
            EncodingType="Default"
            DeleteJavaScriptFiles="false"
            LineBreakPosition="-1"
            JavaScriptOutputFile="$(JavaScriptOutputFile)"
            LoggingType="ALittleBit"
            ThreadCulture="en-au"
            IsEvalIgnored="false"
            />
    </Target>
</Project>

А знаете ли вы, что в SEO денег нет.


Категории: Верстка, HTML, CSS  Теги: , , ,
  1. 14 февраля 2010 21:29 | №1 | progg.ru

    Автоматическая минимизация CSS и JavaScript файлов в Visual Studio | Генеральский чай...

    Thank you for submitting this cool story — Trackback from progg.ru...

  1. Frozik
    11 апреля 2010 0:46 | №2

    Серёга, не поверишь, ушёл к тебе на сайт с поиска =) Слушай такой вопрос, я сам пишу сейчас к студии таск, микрософт сорцы его киноло по Ms-Pl лицензии — www.jeff.wilcox.name/2009...ault-style-task/, но вся проблема, что он не хочет заводиться, то есть в проекте у меня появился Build event, но гмм работать он не хочет. Собственно вопрос, ты в тасках шаришь? =) :sleep:

  2. 11 апреля 2010 10:16 | №3

    Радует, что моя работа не проходит даром :). В тасках слабовато разбираюсь, и времени чтобы разобраться в этом поплотнее совсем нету :(.

  3. Frozik
    12 апреля 2010 18:17 | №4

    А всё, на следующий день разобрался с утречка. Нашёл какой то китайский форум, потом корейский, совместил их результат и всё запахало =)

    Слушай, а по теме, если сервак настроить чтобы он gzip всё сжимал, там разница будет вообще копейки же ну я про IIS7... 8)

  4. 12 апреля 2010 18:35 | №5

    @Frozik

    да нет, разница будет существенной, от 30 до 70%

  5. Frozik
    13 апреля 2010 8:37 | №6

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

  6. 13 апреля 2010 9:28 | №7

    Хорошее будет сжатие, все равно. Ты же сам понимаешь, что текстовая инфа сжимается очень хорошо, даже если там и не будет уже пробелов и переносов строк. И в любом случае даже 10% сжатие на 10000 просмотров сэкономит массу трафика.

  7. Владимир
    13 сентября 2010 13:27 | №8

    Я так понимаю после обработки css файл в нем не останется переносов строк и для просмотра и редактирования он будет труднопонимаем? На счет gzip сжатия: трафик уменьшится, а увеличится ли время открытия страницы?

  8. 13 сентября 2010 14:21 | №9

    Для редактирования используется несжатая и неминимизированная версия, при компиляции или деплойменте оно автоматом уменьшается. Время отклика значительно не увеличивается.

:D :) ^_^ :( :o 8) ;-( :lol: xD :wink: :evil: :p :whistle: :woot: :sleep: =] :sick: :straight: :ninja: :love: :kiss: :angel: :bandit: :alien: