Bundler: клієнтська оптимізація Javascript в ASP.NET, Різне, Програмування, статті

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

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

Введення


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


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

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

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

clip_image001
Рис. 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).

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

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

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

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

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

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

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

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

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

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

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

image
Рис. 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>

*

*