Оптимизиране на код с RequireJS как се прави и за какво служи, SavePearlHarbor
Още едно копие на пристанището
Главно меню
Навигация на публикации
Оптимизация на код с RequireJS: как се прави и за какво служи
В предишната си публикация говорих за това как да включа RequireJS в моя проект. Освен това той обеща да говори за оптимизация. Оптимизирането на проекти, създадени с RequireJS, е много бързо и лесно. Освен това, както самият код (скриптове, библиотеки, плъгини), така и стиловите файлове подлежат на оптимизация. Създадох прост проект от една страница, за да демонстрирам възможностите за оптимизиране на кода на RequireJS. Главната страница показва списък с потребители. Щраквайки върху потребителя, стигаме до страницата с информация за него. Потребителите се делят на два типа - обикновени и администратори, като страниците им се различават както по съдържание, така и по дизайн.
За да изпълня тази задача, както винаги използвах Backbone библиотеката и, разбира се, RequireJS. Можете да видите до какво стигнах тук.
Как се прави
Свързването на RequireJS не би трябвало да е проблем. Основното е да опишете правилно конфигурацията (файл application.js):
Искам веднага да отговоря на въпроса: защо да свързвам Backbone в shim блока? Отговорът е много прост. Версията на Backbone и библиотеката за подчертаване, която използвам, не поддържа AMD. Следователно, x трябва да се добави към блока за подложка. Но можете да изтеглите версии с поддръжка на AMD и да използвате Backbone без допълнителни настройки на RequireJS.
Проектът е готов и можем да започнем да го оптимизираме. За да направите това, трябва да следвате няколко стъпки.
- На официалния уебсайт изтеглете и инсталирайте Node. Изисква се за стартиране на оптимизационния скрипт
- Изтеглете r.js оптимизационен скрипт. Нека създадем отделенпапка за оптимизация в корена на нашия проект и поставете този скрипт там.
- В папката за оптимизиране създайте файлове с настройки за оптимизиране на скриптове (файл build_scripts.js) и стилове (build_css.js). Има доста настройки. Пълен списък с тях е тук. Тези настройки могат също да бъдат зададени като параметри на командния ред директно при изпълнение на оптимизационния скрипт. Но реших да ги пазя във файлове. Първо, по-удобно е при редактиране. Второ, опциите на командния ред имат синтактични ограничения. А именно, точката се интерпретира като разделител за свойствата на обекта. Следователно, запис на формуляра
ще съответства на конфигурацията
Всичко е готово. Сега просто стартирайте оптимизационния скрипт. Отиваме на конзолата и изпълняваме командата:
Получихме оптимизиран скрипт файлapplication-build.js.
Сега нека оптимизираме нашите стилови файлове. Тук не всичко е толкова просто, колкото със скриптовете. Проектът използва четири стилови файла:
- application.css
- adminpage.css
- userpage.css
- bootstrap.min.css
За да ги обединим в едно, нека направим следното: импортираме останалите три файла във файла application.css:
Получихме файлаapplication-built.css. А сега нека проверим резултата, като включим нашите оптимизирани файлове в проекта.
Както виждате всичко работи. Между другото, ето един ред в конфигурационния файл
ни позволява да използваме оптимизирания скрипт файл самостоятелно без RequireJS. В противен случай оптимизираният скрипт ще бъде свързан по следния начин:
За какво е
Оптимизацията спомага за по-бързото зареждане на скриптове, което от своя страна подобрява скоростта на сайта като цяло. Но как да разберете дали даден проект наистина се нуждае от оптимизация? Може би всичко е такаработи достатъчно бързо и нищо не може да се подобри? YSlow ще ви даде отговор на този въпрос.
YSlow е разширение за браузъра Mozilla Firefox, разработено от Yahoo. Той е в състояние да измерва скоростта на зареждане на страниците и също така извършва доста подробен анализ на отделните им компоненти. Един от моментите в анализа е именно необходимостта от оптимизиране на кода. YSlow не работи самостоятелно, а като част от разширението Firebug.