Artykuł

flickr.com/photos/codepo8 flickr.com/photos/codepo8
maj 16 2013
0

Biblioteki warte poznania w C# - Yahoo! UI Library: YUI Compressor for .Net

YUI Compressor od Yahoo! to z pewnością narzędzie dobrze znane każdemu webmasterowi, który szanuje cierpliwość użytkowników swojej witryny;-) Dotychczas ta przydatna biblioteczka kojarzyła się głównie z JAVĄ, która ostatnimi czasy nie ma zbyt dobrej prasy. Warto jednak wiedzieć, że na szczęście istnieją całkiem przyjemne alternatywy.

Jedną z nich jest właśnie port biblioteki YUI Compressor dla .Net. Zasadniczo jest to nieduże rozszerzenie, ale oferujące wszystkie potrzebne opcje kompresji oraz spore możliwości integracji z naszymi projektami. Zainteresowani tematem? Zapraszam zatem do lektury;-)

Charakterystyka i zastosowanie

Yahoo! UI Library: YUI Compressor for .Net to mała i prosta biblioteczka, której głównym zadaniem jest kompresja plików CSS oraz JavaScript. Oprócz tego oferuje ona kilka innych ciekawych funkcjonalności:

  • Kompresję w modelu
    • 1 plik wejściowy - 1 plik wyjściowy
    • wiele plików wejściowych - 1 plik wyjściowy
    • wiele plików wejściowych - wiele wyjść
  • Wsparcie dla: MSBuild Tasks, NAnt Tasks oraz MVC4 BundleTransform

Szczególnie ten ostatni punkt wydaje się być interesujący, ponieważ dzięki niemu możemy w taki sposób budować nasze projekty, by przy deployu/kompilacji kod kompresował się automatycznie (Tutaj możecie przeczytać o tym jak skonfigurować MSBuilda do współpracy z niniejszą biblioteką).

Kiedy warto zastosować Yahoo! UI Library: YUI Compressor for .Net?

Odpowiedź na te pytanie jest raczej prosta i po części udzieliłem jej już we wstępie.

Po pierwsze bibliotekę warto jest stosować w sytuacji gdy kodu JS/CSS na stronie jest dużo. Nawet kilkadziesiąt kilobajtów kodu mniej, może wymiernie wpłynąć na prędkość ładowania witryny. Ten aspekt znów nabiera znaczenia, ze względu na rozwój technologii mobilnych.

Po drugie, warto zwrócić uwagę na nowe rozwiązania oparte na Cloud Computingu. W nowych popularnych usługach z reguły jesteśmy rozliczani za zużyty transfer, więc jeśli na jednej tylko sesji możemy przyoszczędzić kilkadziesiąt - kilkaset kilobajtów, to w moim odczuciu jak najbardziej warto;-)

Trzeci powód wydaje się być odrobinę mniej oczywisty, ale jest całkiem istotny - kompresując kod CSS/JS zaciemniasz go, a tym samym potencjalnemu złodziejowi trudniej będzie go skopiować i przerobić na własny użytek;-)

Po czwarte możesz zyskać w wyszukiwarce Google, którą podobno dużą uwagę zwraca na wydajność witryny.

Jak widać powodów za jest całkiem sporo. Jedyny minus jest taki, że trudniej wprowadzić zmianę na szybko, w sytuacji gdy nie jesteśmy przy stanowisku deweloperskim i nie mamy bezpośredniego dostępu do nieskompresowanego kodu.

Przykład praktyczny

Jako przykład przedstawię prostą aplikację konsolową, która kompresuje wejściowy plik danych, niezależnie od tego czy jest to CSS, czy JS. Aplikacja przyjmuje również opcjonalnie drugi argument, którym jest ścieżka wyjściowa do skompresowanego pliku (pamiętajcie żeby dla obu argumentów podawać ścieżki w cudzysłowach!). W przypadku gdy nie zostanie on podany, program domyślnie nadpisuje plik wejściowy.

Zanim zaczniemy, musimy ściągnąć samą bibliotekę. Wewnątrz pobranego archiwum znajdziemy łącznie 12 plików, ale nas interesować będą 3 poniższe:

  • Yahoo.Yui.Compressor.dll
  • EcmaScript.NET.dll
  • Iesi.Collections.dll

Pierwszą DLLkę podpinamy jako referencję do naszego projektu, natomiast pozostałe dwie musimy umieścić w tym samym katalogu, w którym znajduje się wspomniana wyżej biblioteka.

Skoro jesteśmy już zaopatrzeni w odpowiedni biblioteki, możemy zająć się kodem:

using System;
using System.IO;
using System.Text;
using Yahoo.Yui.Compressor;

namespace YuiTester
{
    class Program
    {
        static void Main(string[] args)
        {
            if (0 == args.Length)
            {
                Console.WriteLine("Nieprawidłowe wywołanie aplikacji. Oczekiwane wywołanie: " +
                    "YuiTester.exe input_path [output_path]");
                Console.ReadKey();
                return;
            }
            ICompressor compressor = null;
            string inputFileData = File.ReadAllText(args[0]);
            string outputFile = 2 == args.Length ? args[1] : args[0];
            if (args[0].EndsWith(".css", StringComparison.CurrentCultureIgnoreCase))
            {
                compressor = new CssCompressor();
            }
            else
            {
                compressor = new JavaScriptCompressor();
            }
            try
            {
                string output = compressor.Compress(inputFileData);
                using (StreamWriter writer = new StreamWriter(outputFile, false, Encoding.UTF8))
                {
                    writer.Write(output);
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine("Wystąpił błąd podczas próby skompresowania pliku. " +
                    "Komunikat błędu: {0}.", ex.Message);

            }
            Console.WriteLine("Naciśnij dowolny klawisz...");
            Console.ReadKey();
        }
    }
}

Jak widać jest to stosunkowo prosta aplikacja. Motywem przewodnim jest obsługa tablicy argumentów. Tak jak wspomniałem wcześniej musi ona posiadać przynajmniej jeden element. Na wstępie sprawdzamy więc, czy nie jest ona pusta (12-18). Następnie definiujemy interfejs kompresora. Tak się akurat ładnie złożyło, że twórcy biblioteki napisali bardzo ładny obiektowy kod i dzięki temu będziemy mogli skorzystać z pięknego polimorfizmu (19). W kolejnym kroku czytamy plik danych (20) oraz definiujemy ścieżkę do pliku wyjściowego - tj. pobieramy ją z argumentu jeśli została tam określona, bądź też korzystamy ze ścieżki do pliku wejściowego (21).

Na bazie rozszerzenia pliku sprawdzamy czy mamy do czynienia z CSSem, czy JavaScriptem, w zależności od typu, tworzymy odpowiedni obiekt kompresora, który implementuje wskazany przez nas wcześniej interfejs (22-29).

W finalnym fragmencie kodu, czyli sekcji try..catch, kompresujemy kod i zapisujemy uzyskany łańcuch do pliku.

Jak widać całe rozwiązanie działa całkiem prosto i bardzo szybko można zastąpić oryginalny kompresor napisany w Javie. Dzięki temu będzie niewątpliwie bezpieczniej i szybciej;-)

Data ostatniej modyfikacji: 30.05.2013, 16:03.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus