@addTagHelper *, AutoLot.Mvc
Обновление меню
Откройте частичное представление
_Menu.cshtml
и перейдите в место сразу после блока
<li>/<li>
, который соответствует методу действия
Home/Index
. Поместите в частичное представление следующую разметку:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-dark"
data-toggle="dropdown">Inventory <i
class="fa fa-car"></i></a>
<b> <vc:menu /></b>
</li>
Строка, выделенная полужирным, визуализирует
MenuViewComponent
внутри меню. Окружающая ее разметка реализует форматирование Bootstrap.
Запустив приложение, вы увидите меню Inventory (Реестр), содержащее производителей в качестве элементов подменю (рис. 31.10).
Пакетирование и минификация
При построении веб-приложений с применением библиотек клиентской стороны необходимо принять во внимание два дополнительных фактора, которые направлены на улучшение показателей производительности — пакетирование и минификацию.
Пакетирование
У веб-браузеров есть установленный предел на количество файлов, которые разрешено загружать параллельно из одной конечной точки. В случае использования с вашими файлами JavaScript и CSS приемов разработки SOLID, которые предусматривают разбиение связанного кода и стилей на более мелкие и управляемые файлы, могут возникать проблемы. Такой подход совершенствует процесс разработки, но становится причиной снижения производительности приложения из-за того, что файлы ожидают своей очереди на загрузку. Пакетирование — это просто объединение файлов с целью предотвращения их блокировки при достижении веб-браузером своего предела загрузки.
Минификация
Кроме того, для улучшения показателей производительности процесс минификации изменяет файлы CSS и JavaScript, уменьшая их размеры. Необязательные пробельные символы удаляются, а имена, не являющиеся ключевыми словами, делаются короче. Хотя файлы становятся практически нечитабельными для человека, функциональность не затрагивается, причем размеры файлов могут значительно сократиться. В свою очередь это ускоряет процесс загрузки, приводя к увеличению производительности приложения.
Решение WebOptimizer
Существует много инструментов разработки, которые позволяют пакетировать и минифицировать файлы как часть процесса сборки проекта. Безусловно, они эффективны, но могут стать проблематичными, если процессы перестают быть синхронизированными, поскольку на самом деле нет хорошего средства для сравнения исходных файлов с их пакетированными и минифицированными версиями.
WebOptimizer представляет собой пакет с открытым кодом, который обеспечивает пакетирование, минификацию и кеширование в качестве части конвейера ASP.NET Core. Он гарантирует, что пакетированные и минифицированные файлы соответствуют первоначальным файлам. Такие файлы не только точны, они еще и кешируются, значительно уменьшая количество операций дискового чтения для запросов страниц. Вы уже добавили пакет
Libershark.WebOptimizer.Core
при создании проектов в главе 29. Теперь пора им воспользоваться.
Обновление Startup.cs
Первый шаг предусматривает добавление WebOptimizer в конвейер. Откройте файл
Startup.cs
из проекта
AutoLot.Mvc
, отыщите в нем метод
Configure()
и добавьте в него следующую строку (сразу после вызова
арр.UseStaticFiles()
):
app.UseWebOptimizer();
Следующим шагом будет конфигурирование того, что должно минифицироваться и пакетироваться. Обычно при разработке своего приложения вы хотите видеть непакетированные/неминифицированные версии файлов, но в подготовительной и производственной средах желательно применять пакетирование и минификацию. Добавьте показанный ниже блок кода в метод
ConfigureServices()
:
if (_env.IsDevelopment() || _env.IsEnvironment("Local"))
{
services.AddWebOptimizer(false,false);
}
else
{
services.AddWebOptimizer(options =>
{
options.MinifyCssFiles(); // Минифицировать все файлы CSS
//options.MinifyJsFiles(); // Минифицировать все файлы JavaScript
options.MinifyJsFiles("js/site.js");
options.MinifyJsFiles("lib/**/*.js");
});
}
В случае среды
Development
пакетирование и минификация отключаются. Для остальных сред минифицируются все файлы CSS, файл
site.js
и все файлы JavaScript (с расширением
.js
) в каталоге
lib
и его подкаталогах. Обратите внимание, что все пути в проекте начинаются с каталога
wwwroot
.
WebOptimizer также поддерживает пакетирование. В первом примере создается пакет с использованием универсализации файловых имен, а во втором — пакет, для которого приводится список конкретных имен:
options.AddJavaScriptBundle("js/validations/validationCode.js",
"js/validations/**/*.js");
options.AddJavaScriptBundle("js/validations/validationCode.js",
"js/validations/validators.
js", "js/validations/errorFormatting.js");
Важно отметить, что минифицированные и пакетированные файлы на самом деле не находятся на диске, а помещаются в кеш. Также важно отметить, что минифицированные файлы сохраняют то же самое имя (site.js и не имеют обычное расширение
.min
(
site.min.js
).
