Оптимизация JavaScript — делаем билд процесс

    В моем проекте очень много классов взаимодействуют на клиентской части. Каждый класс лежит в отдельном файле для удобства разработки. Хорошей практикой для увеличения скорости загрузки страницы, является уменьшение количества запросов к серверу. Поэтому чем меньше файлов и рисунков включать в страницу тем быстрее она загрузится. В случае с рисунками – СSS спрайты помогут уменьшить количество запросов. А в случае с js и css файлами – это конкатенация файлов и сжатие. Об этом и поговорим.

    Очень удобный инструмент с открытым исходным кодом js-builder

    js-builder

    Отличный инструмент для того чтоб сформировать в правильном порядке конкатенацию файлов. Работает с любыми расширениями, которые задаешь. Также сжимает js.
    В моем проекте я использую библиотеку prototype.js. Билдер при сжатии прототайпа выдает эксепшн. Поэтому я скачал исходники и перебилдил так чтоб билдер занимался только конкатенацией без сжатия. Пересобранную длл, можно скачать тут
    Билдер также содержит консольное приложение. А это то что нужно для билда.
    Далее необходимо сделать компрессию файлов которые сгенерирует билдер.
    Для этой цели я использовал YUI Compressor. Отличная библиотека с высокой степенью сжатия.
    Осталось только как то автоматизировать процесс сборки. Для этого я написал batch файл (я в виндовс работаю).
    Выглядит он (build.bat) примерно так
    set path1=D:\Projects \build\

    %path1%JSBuilder\JSBuildConsole.exe /path=%path1%MyHeritageBuild.jsb

    java -jar %path1%yuicompressor-2.3.1\build\yuicompressor-2.3.1.jar
    %path1%build\output_file_from_js_builder.js -o %path1%target-min.js

    java -jar %path1%yuicompressor-2.3.1\build\yuicompressor-2.3.1.jar
    %path1%build\style-all.css -o %path1%style-all-min.css


    В моем случае джс билдер на выходе дает 2 файла — css и js, а компрессор их сжимает.
    Надеюсь это поможет вам создать удобный процесс сборки файлов.

    Эту статью я взял из своего техноблога на сайте www.kigorw.com
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 13
    • +1
      спасибо, буду завтра пробовать.
      • 0
        Кстати, если обратить внимание на папку snippets, можно увидеть js файлы. Знатоки могут догадаться что это снипеты, которые используются в аптане. Я использую прототайп.джс и написал себе удобные сниппеты, назначение которых можно понять из названий. Если будут желающие могу выложить их для свободного использования.
        • +1
          Лично я пользуюсь PHP обфускатором, который нашел где-то на sourceforge... Мне лениво каждый раз запускать виндовую прогу при выкладке кода. Надо этот процесс максимально автоматизировать...

          CSS обфускаторов тоже хватает... CSSTidy например.

          ИМХО проще юзать скриптовые компиляторы
          • 0
            Мне не нужен постоянный билд, для отладки это не самое удобное. Билд нужен в случае если ты делаешь релиз. Насчет компиляторов - если есть ссылки на что то хорошое, пожалуйста, предоставьте.
            • 0
              JSMin рекомендован Яхой
              или (не сочтите свинством)
              Ускорение загрузки JavaScript и CSS
              • 0
                Не уверен, что сжатие сможет уменьшить количество запросов :)

                Конкатентацию тоже нужно использовать осторожно. Если возможных вариантов сборки будет больше чем исходных файлов, то за счет неоптимального использования кэша это может наоборот всё испортить.
                • 0
                  посмотрите, как решают эту проблему jQuery и Prototype
                  первая для этого дела использует apache ant
                  вторая - ruby rakefiles
                  • 0
                    Впервые слышу о apache ant. Надо будет почитать. Спасибо
                  • +1
                    На самом деле существует 3 задачи:
                    1. Сборка js и css файлов
                    2. Кэширование js и css файлов
                    3. Отладка js скриптов

                    JS Builder не решает третью задачу, точнее превращает её решение в проблему, а вторая задача полностью ложится на плечи разработчиков (т.е. это не автоматическое решение).

                    Мы сделали по своему. И я так думаю, что мы справились со всеми тремя задачами на 100%. Вот ссылка:
                    http://www.moskva.com/jas/ver,1.1.js;hab…
                    1. FrontEnd (nginx) настроен так, что если файл есть, то он его и отдаёт + в заголовках посылает броузеру команду "закэшировать файл навсегда" + он может сжимать файлы (у нас правда они не сжимаются - были какие-то проблемы с IE6)
                    2. Если файла нет, то nginx передаёт управление в BackEnd (Apache+PHP). PHP анализирует $REQUEST_URI и соединяет файлы /ver/1.1.js и /habr/1.js и записывает из на диск чтобы при следущем запросе его подхватил nginx
                    3. Если нам понадобиться поменять файл /habr/1.js , то мы изменим URL к файлу на http://www.moskva.com/jas/ver,1.2.js;hab…
                    4. Если нужно подцепить сразу несколько файлов, то на FTP кладётся специальный файлик со списком нужных файлов. Например, http://www.moskva.com/jas/ver,1.1.js;hab… сформирован из 2-х файлов.(/habr/1.js и /habr/2.js)
                    5. Для отладки к URL`у добавляется специальный параметр - он даёт команду PHP "не записывать результат на диск"

                    В процессе разработки никто не жаловался - всем нашим нравится такая система =)

                    ЗЫЖ Наша реализация - это переделка вот этого решения <- так как там сделано делать нельзя =)
                    • 0
                      Цитата 1.>Если файла нет, то nginx передаёт управление в BackEnd (Apache+PHP). PHP анализирует $REQUEST_URI и соединяет файлы /ver/1.1.js и /habr/1.js и...
                      Цитата 2.>Если нужно подцепить сразу несколько файлов, то на FTP кладётся специальный файлик...

                      Вопрос: разве "цитата 1" не есть пример того как подцепить несколько файлов (/ver/1.1.js и /habr/1.js)? зачем способ со "специальным файликом" на FTP?

                      Цитата 3>Если нам понадобиться поменять файл /habr/1.js , то мы изменим URL к файлу на...

                      Вопрос: где изменим? в html шапках сайта и прочих местах, должен загружаться новый скрипт вместо закешированного навсегда старого?
                      • 0
                        зачем способ со "специальным файликом" на FTP?

                        Это просто удобно (по крайней мере мне при работе в FAR-е). Сейчас посчитал: в моём текущем проекте 26 спец.файла, 145 файлов js и 28 css. Если использовать первый способ, то они все просто не уберутся в GET запрос, не нужно менять весь путь к файлу, если в проект добавляется сразу много файлов, да и просто для разделения сущностей: в один каталог кладём ядро, в другой - абстрактные классы, в третий - реализации абстрактных классов.

                        где изменим?

                        В шаблонах. В нашей админке мы просто меняем одну константу и все файлы для всех пользователей становятся "как будто бы новыми"
                    • НЛО прилетело и опубликовало эту надпись здесь

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