Сначала мы поговорим о том, зачем нужна HTML-минификация, о ее почти 20-летней истории и эволюции программных средств, автоматизирующих данный процесс. Затем о WebMarkupMin и его модулях. Рассмотрим примеры его использования в ASP.NET Core и ASP.NET 4.X. Измерим эффективность минификации с помощью WebMarkupMin. Перечислим известные программные продукты и веб-сайты, которые его используют. А также рассмотрим альтернативные решения для .NET и ASP.NET.
Видео-запись доклада доступна на YouTube - https://www.youtube.com/watch?v=jmPkUD_SDOk
1 of 41
Download to read offline
More Related Content
Презентация «WebMarkupMin – HTML-минификатор для платформы .NET» с MskDotNet Meetup #25
2. 1. HTML-минификация
2. Общая информация о WebMarkupMin
3. Ядро и внешние минификаторы
4. ASP.NET Core расширения
5. ASP.NET 4.X расширения
6. Эффективность HTML-минификации
7. Кто использует WebMarkupMin
8. Альтернативные решения
9. Выводы
План доклада
2
5. Итак, что нужно сделать, чтобы улыбка не сходила с лица, а конкуренты
побежали в аптеку за антидепрессантами:
• Перестать писать кавычки в тэгах. …
• Похоронить все тэги <meta name="generator">. …
• Не писать пробелы в <meta name="keywords">, …
• Поганой метлой все комментарии прогнать. …
• Не называйте картинки длинными именами. …
1990-е: Ручная HTML-минификация
“
Ководство: § 17. Паранойя
оптимизатора, 1998 год
АРТЕМИЙ ЛЕБЕДЕВ
5
6. • HTML Shrinker - //thepluginsite.com/products/htmlshrinker/index.htm
• Absolute HTML Compressor - //www.alentum.com/ahc/
• Оптимизатор HTML файлов
• HTML Source Cleaner
• Anetto HTML Optimize!
• HTMLCompact
• HTML Code Cleaner - //www.htmlcodecleaner.com-http.com/
• HTMLOpt - //www.alonewolfsoft.ru/html_optimizer.htm
• Absolute HTML Optimizer
2000-е: Windows-приложения для
HTML-минификации…
6
8. 1. HtmlCompressor Сергея Ковальчука (Java) - //github.com/serg472/htmlcompressor
2. HTML Minifier Юрия Зайцева (Node.js) - //github.com/kangax/html-minifier
2010-е: Кроссплатформенные библиотеки
для HTML-минификации
8
9. Основные техники HTML-минификации…
Удаление HTML-комментариев из тегов
style и script
Использование упрощенного DOCTYPE:
<!DOCTYPE html>
Использование мета-тега charset:
<meta http-equiv=Content-Type
content="text/html;charset=utf-8">
→ <meta charset=utf-8>
Удаление пустых атрибутов:
<span style=""> → <span>
Удаление/сворачивание ненужных
пробельных символов
Удаление HTML-комментариев
Удаление ненужных кавычек из
атрибутов:
<p class="foo"> → <p class=foo>
Удаление необязательных конечных
тегов:
<p>…</p> → <p>…
Отказ от XHTML-синтаксиса:
<input … checked="checked" /> →
<input … checked>
9
10. …Основные техники HTML-минификации
Удаление тегов без содержимого
Удаление избыточных атрибутов:
<input type="text"> → <input>
Удаление протоколов HTTP и HTTPS из
URL:
http://example.com → //example.com
Удаление псевдо-протокола JavaScript из
событийных атрибутов:
onclick="javascript:…" →
onclick="…"
Минификация CSS-кода из тегов style и
атрибутов style
Минификация JS-кода из тегов script,
событийных атрибутов и атрибутов href
10
12. WebMarkupMin – это очень зрелый минификатор, не только для HTML, но
также для XML и XHTML, а также для тегов script и style, встроенных в ваш
HTML. Они предоставляют множество NuGet пакетов для подключения к
вашим ASP.NET приложениям, как для ASP.NET 4.x использующих MVC,
HttpModules, WebForms(!), так и к счастью для нас, ASP.NET Core.
Что такое WebMarkupMin?
12
“
HTML minification using
WebMarkupMin in ASP.NET Core,
2016 год
ЭНДРЮ ЛОК
13. • Проект существует с 2013 года
• Репозиторий проекта на Github - //github.com/Taritsyn/WebMarkupMin
• Объемная вики-документация - //github.com/Taritsyn/WebMarkupMin/wiki
• Поддерживает .NET Framework 4.X и .NET Core
• Более 160 звезд на GitHub
• Более 177 тысяч загрузок через NuGet
• Более 20 программных продуктов используют WebMarkupMin
• Известно около 200 сайтов, на которых установлен WebMarkupMin
Что нужно знать о WebMarkupMin
13
16. Пример использования класса HtmlMinifier
string htmlInput = File.ReadAllText("input.html");
var htmlMinifier = new HtmlMinifier();
MarkupMinificationResult result = htmlMinifier.Minify(htmlInput, generateStatistics: true);
if (result.Errors.Count == 0)
{
if (result.Statistics != null)
{
Console.WriteLine("Saved: {0:N2}%", result.Statistics.SavedInPercent);
}
Console.WriteLine("Minified content:{0}{0}{1}", Environment.NewLine, result.MinifiedContent);
}
else
{
IList<MinificationErrorInfo> errors = result.Errors;
Console.WriteLine("Found {1} error(s):{0}", Environment.NewLine, errors.Count);
foreach (var error in errors)
{
Console.WriteLine("Line {1}, Column {2}: {3}{0}", Environment.NewLine,
error.LineNumber, error.ColumnNumber, error.Message);
}
}
16
17. Пример подключения внешних
минификаторов
…
using WebMarkupMin.NUglify;
…
ICssMinifier nuglifyCssMinifier = new NUglifyCssMinifier();
IJsMinifier nuglifyJsMinifier = new NUglifyJsMinifier();
var htmlMinifier = new HtmlMinifier(cssMinifier: nuglifyCssMinifier,
jsMinifier: nuglifyJsMinifier);
…
17
22. Пример настройки в Web Forms и MVC…
…
using WebMarkupMin.AspNet4.Common;
…
public class WebMarkupMinConfig
{
public static void Configure(WebMarkupMinConfiguration configuration)
{
configuration.AllowMinificationInDebugMode = true;
configuration.AllowCompressionInDebugMode = true;
…
}
}
…
Файл App_Start/WebMarkupMinConfig.cs:
22
23. …Пример настройки в Web Forms и MVC
…
using System.Web.Routing;
using WebMarkupMin.AspNet4.Common;
…
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
…
RouteConfig.RegisterRoutes(RouteTable.Routes);
WebMarkupMinConfig.Configure(WebMarkupMinConfiguration.Instance);
…
}
}
…
Файл Global.asax.cs:
23
24. Пример настройки в Web Pages
…
@using WebMarkupMin.AspNet4.Common
…
@{
WebMarkupMinConfiguration configuration = WebMarkupMinConfiguration.Instance;
configuration.AllowMinificationInDebugMode = true;
configuration.AllowCompressionInDebugMode = true;
…
}
Файл _AppStart.cshtml:
24
26. Пример подключения в Web Forms
…
using WebMarkupMin.AspNet4.WebForms;
…
public partial class About : MinifiedAndCompressedHtmlPage
{
…
}
…
Файл Code Behind ASPX-страницы:
26
27. Пример подключения в MVC на уровне
действия контроллера
…
using WebMarkupMin.AspNet4.Mvc;
…
public class HomeController : Controller
{
…
[CompressContent]
[MinifyHtml]
public ActionResult About()
{
…
}
…
}
}
…
Файл контроллера:
27
28. Пример подключения в MVC на уровне всего
приложения
…
using WebMarkupMin.AspNet4.Mvc;
…
public class FilterConfig
{
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
…
filters.Add(new CompressContentAttribute());
filters.Add(new MinifyHtmlAttribute());
…
}
}
…
Файл App_Start/FilterConfig.cs:
28
39. 1. HTML-минификация – это уже стандартная процедура при разработке веб-
приложений
2. Позволяет сократить размер веб-страницы в среднем на 21-24%
3. Позволяет увеличить скорость рендеринга веб-страницы в браузере
4. При использовании вместе с Gzip-сжатием с помощью HTML-минификации можно в
среднем сэкономить 9-12%
5. В ASP.NET-приложениях рекомендуется кэшировать результат HTML-минификации
Выводы
39
40. 1. Проект WebMarkupMin на GitHub - //github.com/Taritsyn/WebMarkupMin
2. Документация WebMarkupMin - //github.com/Taritsyn/WebMarkupMin/wiki
3. Сайт WebMarkupMin Online - //webmarkupmin.apphb.com
4. А. Лебедев. Паранойя оптимизатора -
//web.archive.org/web/20020615132812/http://www.artlebedev.ru/kovodstvo/paragraphs
/17.html
5. Ю. Зайцев. Optimizing HTML - //perfectionkills.com/optimizing-html/
6. Э. Лок. HTML minification using WebMarkupMin in ASP.NET Core - //andrewlock.net/html-
minification-using-webmarkupmin-in-asp-net-core/
7. М. Кристенсен. Effects of GZipping vs. minifying HTML files -
//madskristensen.net/blog/effects-of-gzipping-vs-minifying-html-files
Ссылки
40