- PVSM.RU - https://www.pvsm.ru -
В своем предыдущем посте я рассказал о том, как подключить RequireJS к своему проекту. Кроме того, пообещал рассказать об оптимизации. Оптимизировать проекты, построенные на RequireJS очень быстро и легко. Причём оптимизации подлежит как сам код (скрипты, библиотеки, плагины) так и файлы стилей.
Для демонстрации возможностей RequireJS по оптимизации кода я создал простой одностраничный проект. На главной странице отображается список пользователей. Кликнув по пользователю попадаем на страницу с информацией о нем. Пользователи делятся на два типа — обычные и администраторы, и их страницы отличаются как наполнением так и оформлением.
Для реализации данной задачи я, как всегда, использовал библиотеку Backbone и конечно же RequireJS. На то, что в итоге у меня получилось, вы можете посмотреть здесь [1].
С подключением 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 [2]. Поэтому иx обязательно необходимо добавить в блок shim. Но можно скачать версии с поддержкой AMD и спокойно использовать Backbone без дополнительных настроек RequireJS.
Проект готов и мы можем приступать к его оптимизации. Для этого необходимо выполнить несколько шагов.
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 другие три файла:
@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 [6].
YSlow — это расширение для браузера Mozilla Firefox, разработанное компанией Yahoo. Оно умеет измерять скорость загрузки страниц, а также проводит достаточно подробный анализ их отдельных компонент. Одним из пунктов при анализе как раз и есть необходимость оптимизации кода. Работает YSlow не самостоятельно, а как часть расширения Firebug.
Автор: kambur
Источник [7]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/87805
Ссылки в тексте:
[1] здесь: http://my-files.ru/rehuzg
[2] AMD: https://github.com/amdjs/amdjs-api/wiki/AMD
[3] официальном сайте: https://nodejs.org/
[4] r.js: http://requirejs.org/docs/download.html#rjs
[5] здесь: https://github.com/jrburke/r.js/blob/master/build/example.build.js
[6] YSlow: http://yslow.org/
[7] Источник: http://habrahabr.ru/post/254675/
Нажмите здесь для печати.