Улучшение веб-приложений с помощью объединения и минификации ASP.NET
Веб-страницы превратились из простых и статических HTML-страниц в сложные веб-сайты с динамическим содержанием, а также сложные веб-приложения, предназначенные для использования на разных устройствах. Для создания этих веб-приложений требуется различное содержимое, включая стили CSS и JavaScript. Управление файлами с такими разнообразными ресурсами требует большей пропускной способности как от команды разработчиков, так и от клиента.
Повышенная сложность веб-приложений может даже превзойти мобильные возможности устройств. Увеличение трафика на сайтах, поддерживаемых сервером, будь то общий или облачный, означает большие расходы для бизнеса.
Применение объединения и минификации ASP.NET к этим файлам помогает командам разработчиков и их клиентам преодолевать эти проблемы и создавать эффективные веб-страницы для большего числа платформ.
Что такое пакетирование и минификация ASP.NET?
Объединение и минификация - это два метода, доступные в ASP.NET, инструменте с открытым исходным кодом для создания сервисов и веб-приложений с использованием .NET. Пакетирование ASP.NET - это простая функция, которая упрощает объединение нескольких файлов в один, в то время как минификация - это процесс, посредством которого оптимизируется код в скрипте или файле CSS.
Почему эти два шага так важны? Каждый разработчик стремится структурировать код, чтобы сделать его более читабельным и пригодным для повторного использования. Методы объединения и минификации ASP.NET помогают уменьшить количество запросов, отправляемых на сервер, и размер запрашиваемых ресурсов. Объединение и минификация в конечном итоге сокращают время загрузки запроса.
Устаревшие тактики объединения и минификации
Методы объединения и минификации ASP.NET применялись к файлу BundleConfig.cs в App_Start. Метод под названием RegisterBundles в ASP.NET использовался для создания, регистрации и настройки пакетов.
Следующие примеры демонстрируют реализацию RegisterBundles:
и
Вот пример кода интерфейса в RegisterBundles:
Устаревшие методы объединения ASP.NET увеличивают время выполнения
Хотя этот подход выглядит простым в использовании, он больше не применим в ASP.NET 5. Почему? Проблема с этим подходом к объединению ASP.NET заключается в том, что эти файлы увеличивают время выполнения на веб-сервере. Кэширование файлов из больших приложений снижает объем памяти и возможности процессора.
Лучшее объединение и минификация с помощью Gulp и NPM
Gulp и NPM стали инструментами по умолчанию для объединения и минимизации файлов, когда ASP.Net Core впервые стал доступным для пользователей.
Что такое Gulp и NPM?
Gulp - один из самых популярных исполнителей задач на основе JavaScript, которые представляют собой инструменты, используемые для автоматизации подпрограмм, участвующих в процессе сборки (таких как объединение и минификация, или очистка среды разработки) и не только.
Основные задачи, которые необходимо выполнить перед объединением и минификацией с помощью Gulp, следующие:
- Свяжите задачи Gulp с различными действиями в Visual Studio, чтобы при изменении скриптов и стилей компиляция автоматически запускалась и отражалась в вашем браузере.
- Скомпилируйте все сторонние зависимости.
- Скомпилируйте все свои сценарии и файлы LESS.
- Поместите запущенный Gulp.watch в папку Front-End для автоматической перекомпиляции.
Как определять и настраивать задачи в Gulp
Набор задач Gulp определен в Gulpfile.js. Это файл JavaScript, добавленный в ваш проект. Во-первых, нам нужно указать необходимые модули Node. Модули могут быть расположены либо по имени, либо по пути, и каждый из них будет назначен переменной.
Укажите необходимые модули кода
Эта обязательная функция импортирует каждый модуль, чтобы зависимые задачи могли использовать свои функции. Каждому из импортированных модулей присваивается переменная.
Назначьте модули кода переменным
Кроме того, создается серия путей, чтобы расположение файлов CSS и JavaScript можно было повторно использовать и ссылаться на них в задачах.
Следующим шагом после импорта необходимых модулей является определение задач.
Определение необходимых задач
Сначала очистите старые минифицированные версии, затем выполните задачу, которая минимизирует и объединяет все версии.
После создания Gulpfile.js откройте package.json и добавьте зависимости Gulp:
Добавить зависимости
Новые методы объединения и минификации
Новое расширение Visual Studio под названием BundlerMinifier заменило Gulp в качестве инструмента по умолчанию для объединения и минимизации ASP.NET в ASP.Net Core. Gulp необходимо вручную добавить в ASP.Net Core для тех, кто хочет и дальше его использовать.
Как использовать BundlerMinifier
Начните с загрузки и установки расширения BundlerMinifier от Mads Kristensen. Visual Studio попросит вас установить его при создании нового проекта в ASP.NET.
У вас уже должен быть создан файл bundleconfig.json. Когда вы щелкаете правой кнопкой мыши по файлу JavaScript или CSS, должна появиться опция «Свернуть файл». Щелчок по нему создаст site.min.js и добавит новые записи в bundleconfig.json:
Если выбрано несколько файлов, вы увидите параметр «Объединить и минимизировать файлы».
Есть возможность конвертировать в Gulp. Эта функция позволяет легко начать использовать Gulp на основе того, что уже настроено в bundleconfig.json. Выбор этой опции создаст Gulpfile.js и package.js, если они еще не существуют, а затем установит необходимые модули узлов с помощью npm.
Gulpfile.js будет использовать bundleconfig.json для получения путей к входным и выходным файлам, но будет использовать обычные плагины Gulp для объединения и минификации. Вы можете изменить его, чтобы использовать другие плагины, не теряя возможности читать файл bundleconfig.json.
Процесс
Очень легко - и, возможно, необходимо - автоматизировать объединение и минификацию как часть процесса сборки. Для этого просто добавьте команду dotnet bundle в раздел предварительной компиляции вашего существующего файла project.json:
Gulp против Bundler и Minifier
В заключение, Bundler & Minifier - это эффективный инструмент, который упрощает процесс улучшения System.Web.Optimization за счет объединения ASP.NET и минимизации ваших файлов. Но если ваш случай требует более сложной обработки, выберите Gulp.
Рассмотрим некоторые плюсы и минусы обоих решений:
Бандлер и минификатор:
плюсы:
- Быстро, легко и интуитивно понятно - все можно сделать всего несколькими щелчками мыши
- Не требует предыдущего опыта работы с JavaScript.
- Файл JSON с простым синтаксисом, который легко изучать и редактировать.
- Легко конвертируется в Gulp
минусы:
- Не подходит для сложных задач
- Ограниченная информация доступна для устранения возможных проблем
Глоток:
плюсы:
- Очень мощный, лучше подходит для больших проектов
- Может использоваться не только для объединения и минификации.
- Подчеркивает код над конфигурацией
- Большое сообщество поддержки доступно для устранения неполадок
минусы:
- Требуется некоторый опыт написания заданий
- Требуется большой опыт работы с Javascript и Node JS.
- Изменения в API вызывают обновления скриптов сборки
Исходное сообщение можно найти здесь.
Создавайте инновации вместе с нами. Нажмите здесь, чтобы получить доступ ко всем нашим бесплатным ресурсам.
Автор
Любомир применяет свою страсть к математике и глубокому анализу в своей работе в качестве разработчика в MentorMate. Он ведет свои команды через Agile-спринты, консультируя клиентов и создавая прочную основу проекта. Изюминкой работы Любомира является постоянный вклад, который он и его команда вносят в одно из самых длительных и масштабных проектов MentorMate.
Благодаря предыдущему опыту развития в компаниях по всей Европе, Любомир стремится к сотрудничеству, преодолевая культурные границы. Доказательство тому - впечатляющие результаты, которые получают команды разработчиков MentorMate.
