Оптимизация кода с помощью 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.

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

1. На официальном сайте скачать и установить Node. Он необходим для запуска скрипта оптимизации
2. Скачать скрипт оптимизации r.js. Создадим отдельную папку optimization в корне нашего проекта и поместим этот скрипт туда.
3. В папке 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. А теперь проверим результат подключив наши оптимизированные файлы в проект.

<link href="css/application-built.css" rel="stylesheet" media="screen">

<script type="text/javascript" src="application-built.js"></script>

Как видим все работает. Кстати, вот такая строка в файле с конфигурацией

include: ["requireLib"],

позволяет нам использовать оптимизированный файл скриптов отдельно, без RequireJS. Иначе оптимизированный скрипт подключался бы так:

<script data-main="js/application-built" src="js/library/require.js"></script>

Для чего это нужно

Оптимизация помогает ускорить загрузку скриптов, что в свою очередь улучшает скорость работы сайта в целом. Но как узнать, действительно ли проекту нужна оптимизация? Возможно все и так работает достаточно быстро, и улучшить ничего нельзя? Ответ на этот вопрос вам даст YSlow.

YSlow — это расширение для браузера Mozilla Firefox, разработанное компанией Yahoo. Оно умеет измерять скорость загрузки страниц, а также проводит достаточно подробный анализ их отдельных компонент. Одним из пунктов при анализе как раз и есть необходимость оптимизации кода. Работает YSlow не самостоятельно, а как часть расширения Firebug.

Автор: kambur

Источник