Автоматическая минимизация 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.

Пример простейшей задачи минимизации файлов в 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 денег нет.