Bundler: клієнтська оптимізація Javascript в ASP.NET

Сьогодні, при розробці додатків в інтернеті, питання клієнтської оптимізації постає все частіше. Якщо раніше, сторінка відправлена клієнтові містила тільки інформацію, то сьогодні дуже часто така сторінка містить багато Javascript-коду. Для досягнення найкращої продуктивності і зниження навантаження на сервер застосовуються правила клієнтської оптимізації.

У цій статті мова піде про Bundler – зручний засіб клієнтської оптимізації Javascript для. Net-проектів.

Введення


Клієнтська оптимізація щодо Javascript передбачає наступні дії:


Перше правило зменшує розмір необхідний для передачі з сервера на клієнт, що дозволяє зменшити навантаження на сервер і розвантажити канали зв'язку. Друге правило зменшує кількість запитів на сервер, що дозволяє браузеру користувача зменшити час необхідний на рендеринг сторінки.

Кешування Javascript-файлів (як і будь-яких інших статичних файлів) дозволяє браузеру не запитувати з сервера дані, використовуючи завантажені раніше файли з власного кешу.

Використання GZip-стиску для передачі даних між клієнтом і сервером може істотно знизити обсяг переданого трафіку, який буде стискатися сервером і розпаковуватися на браузері клієнта. GZip-стиснення може бути включене на сервері IIS (рис.1).


Рис. 1. Включення стиснення на сервері IIS 7.5

У цій статті мова піде про застосування перших двох правил в ASP.NET за допомогою нового інструменту Bundler. Організація кешування Javascript-файлів на стороні клієнта і тонкощі настройки стиснення трафіку на сервері IIS виходять за рамки статті і не будуть розглянуті.


Bundler


Bundler – це рішення, яке дозволить вам просто і прозоро застосувати правила мінімізації та комбінування Javascript-файлів. Крім того, Bundler містить ряд корисних функцій, які можуть полегшити вам роботу з клієнтською оптимізацією Javascript.

Щоб почати використовувати Bundler необхідно завантажити пакет з вихідними кодами зі сторінки на GitHub. Після завантаження скачав проекту в Visual Studio, Необхідно скомпілювати проект Bundler.Framework. У результаті отримаємо збірку Bundler.Framework.dll, Про застосування якої і піде мова далі.


Застосування Bundler


Для демонстрації використання Bundler я буду використовувати проект ASP.NET MVC (у Visual Studio 2010 RC), який створюється за умовчанням (версія RC). За умовчанням, в проекті не використовується клієнтська валідація. Додамо її на форму реєстрації, вказавши перед формою <% Html.EnableClientValidation(); %> (Рис. 2).


Рис. 2. Форма реєстрації з включеною клієнтської валідація

Щоб валідація форми на клієнті заробила необхідно підключити декілька Javascript-файлів. Додамо необхідні файли в Site.Master (Рис. 3)


Рис. 3. Додавання скриптів в Site.Master

Запустимо і переконаємося що клієнтська валідація працює як треба. Однак, перед нами постає кілька питань: по-перше, ми підключили скрипти для релізу та на етапі налагодження ними не буде зручно користуватися. А по-друге, виходячи з правил клієнтської оптимізації нам би не хотілося змушувати клієнта запитувати цілих три скрипта відразу. Замість того, щоб шукати свої рішення, скористаємося Bundler.

Підключивши збірку Bundler.Framework.dll до нашого проекту ми відразу ж можемо використати всі можливості Bundler. Перепишемо код використання скриптів з допомогою функціонала Bundler (рис. 4).


Рис. 4. Включення скриптів в Bundler

Запустимо проект і подивимося, що вийшло в результаті. Заглянувши у вихідні коди сторінки в браузері ми побачимо, що скрипти, як і раніше рендерится по-окремо (рис. 5).


Рис. 5. Результат роботи Bundler в режимі Debug

Це поведінка – насправді одна з корисних функцій Bundler. Коли ви збираєте проект у Debug-режимі, Bundler не обробляє скрипти і дозволяє виводити їх у незмінному вигляді. Скористаємося цим і підсунь йому debug-версії скриптів, і разом з цим вимкнемо налагодження для нашого проекту встановивши debug=”false” в web.config. Скомпіліруем і запустимо, повторно подивимося результуючу розмітку (рис. 6).


Рис. 6. Результат роботи Bundler без налагодження

Заради інтересу заглянемо, в результуючий код AjaxBundle.js (рис. 7).


Рис. 7. Результат роботи Bundler

Як можна переконатися, хоч ми й використали debug-версії скриптів для клієнтської валідації, Bundler самостійно не тільки поєднав їх разом в один файл, але і стиснув вміст позбувшись зайвих прогалин і коментарів.

Зверніть увагу на те, що для запиту до згенеровані файли, Bundler використовує внутрішній параметр r, якому присвоюється строкове значення поточного часу. Цей параметр служить для того, щоб точно задати версійність згенерованої збірки скриптів. Без версійність браузер може закешована однойменний скрипт старої версії без важливих змін і оновлений функціонал на клієнта не буде доступний.


Висновок


У статті ми розглянули роботу Bundler, механізму який допомагає гнучко реалізувати декілька корисних практик клієнтської оптимізації. По-перше, Bundler стискає Javascript-файли, а по-друге, поєднує їх в один загальний файл.

Bundler підтримує автоматичну генерацію і версійність вихідних Javascript-файлів. Крім того, Bundler враховує режим поточної збірки проекту і в разі debug-версії дозволяє працювати з вихідними скриптами, не змінюючи їх.

Bundler представляється дуже корисним інструментом, на який варто звернути увагу. Проект розповсюджується з відкритим вихідним кодом і ви можете доповнити його за власним бажанням, додавши необхідний функціонал.

Якщо ви шукайте рішення для оптимізації роботи з безліччю Javascript-файлів у вашому проекті, то Bundler буде гарним вибором.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*