Оптимизация кода с помощью RequireJS: как это делается и для чего это нужно
В своем предыдущем посте я рассказал о том, как подключить RequireJS к своему проекту. Кроме того, пообещал рассказать об оптимизации. Оптимизировать проекты, построенные на RequireJS очень быстро и легко. Причём оптимизации подлежит как сам код (скрипты, библиотеки, плагины) так и файлы стилей.Для демонстрации возможностей RequireJS по оптимизации кода я создал простой одностраничный проект. На главной странице отображается список пользователей. Кликнув по пользователю попадаем на страницу с информацией о нем. Пользователи делятся на два типа — обычные и администраторы, и их страницы отличаются как наполнением так и оформлением.Для реализации данной задачи я, как всегда, использовал библиотеку Backbone и конечно же RequireJS. На то, что в итоге у меня получилось, вы можете посмотреть здесь.
Как это делаетсяС подключением RequireJS проблем возникнуть не должно. Главное правильно описать конфигурацию (файл application.js): requirejs.config ({ baseUrl: «js/library», paths: { jquery: 'jquery.min', backbone: 'backbone.min', underscore: 'underscore.min', domready: 'domReady', appControllers: '…/Controllers', appModels: '…/Models', appViews: '…/Views' }, shim: { 'underscore': { exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } }); Сразу хочу ответить на вопрос: для чего подключать Backbone в блоке shim? Ответ очень прост. Версия библиотеки Backbone и underscore, которую использую я, не поддерживает AMD. Поэтому иx обязательно необходимо добавить в блок shim. Но можно скачать версии с поддержкой AMD и спокойно использовать Backbone без дополнительных настроек RequireJS.Проект готов и мы можем приступать к его оптимизации. Для этого необходимо выполнить несколько шагов.
На официальном сайте скачать и установить Node. Он необходим для запуска скрипта оптимизации Скачать скрипт оптимизации r.js. Создадим отдельную папку optimization в корне нашего проекта и поместим этот скрипт туда. В папке optimization создаём файлы с настройками оптимизации для скриптов (файл build_scripts.js) и стилей (build_css.js). Настроек достаточно много. Полный их список находится здесь. Эти настройки можно задавать и как параметры командной строки непосредственно при запуске скрипта оптимизации. Но я решил сохранить их в файлах. Во-первых, это удобнее при редактировании. Во-вторых, параметры командной строки имеют ограничения в синтаксисе. А именно — точка интерпретируется как разделитель для свойств объектов. Поэтому запись вида paths.core/jquery.tabs=empty: будет соответствовать конфигурации paths: { 'core/jquery': { tabs: 'empty:' } } , а не paths: { 'core/jquery.tabs': 'empty:' } } Все готово. Теперь просто запускаем скрипт оптимизации. Заходим в консоль и выполняем команду: node r.js -o build_scripts.js Получили оптимизированный файл скриптов application-build.js.Теперь давайте оптимизируем наши файлы стилей. Здесь не все так просто как со скриптами. В проекте используются четыре файла стилей:
application.css adminpage.css userpage.css bootstrap.min.css Для того, чтобы объединить их в один, сделаем так: импортируем в файл application.css другие три файла: @import url («bootstrap.min.css»); @import url («userpage.css»); @import url («adminpage.css»); Выполним оптимизацию: node r.js -o build_css.js Получили файл application-built.css. А теперь проверим результат подключив наши оптимизированные файлы в проект.
Как видим все работает. Кстати, вот такая строка в файле с конфигурацией include: [«requireLib»], позволяет нам использовать оптимизированный файл скриптов отдельно, без RequireJS. Иначе оптимизированный скрипт подключался бы так: Для чего это нужно Оптимизация помогает ускорить загрузку скриптов, что в свою очередь улучшает скорость работы сайта в целом. Но как узнать, действительно ли проекту нужна оптимизация? Возможно все и так работает достаточно быстро, и улучшить ничего нельзя? Ответ на этот вопрос вам даст YSlow.YSlow — это расширение для браузера Mozilla Firefox, разработанное компанией Yahoo. Оно умеет измерять скорость загрузки страниц, а также проводит достаточно подробный анализ их отдельных компонент. Одним из пунктов при анализе как раз и есть необходимость оптимизации кода. Работает YSlow не самостоятельно, а как часть расширения Firebug.
