Требования: В предыдущих проектах MVC на .NET Framework JS, CSS можно было объединять и сжимать с помощью библиотеки Microsoft Microsoft.AspNet.Web.Optimization. После использования ASP.NET Core, как мне объединить и сжать существующие JS и CSS-файлы?
Проект .NET Framework ссылается на следующее:
Пример кода:
связывание
Объединение объединяет несколько файлов в один. Объединение сокращает количество серверных запросов, необходимых для рендеринга веб-актива, такого как веб-страница. Вы можете создавать сколько угодно отдельных пакетов специально для CSS, JavaScript и других. Меньшее количество файлов означает переход от браузера к серверу или от сервиса, предоставляющего приложениеМеньшее количество HTTP-запросов。 Это улучшает производительность загрузки главной страницы.
компресс
Миниминизируйте удаление ненужных символов из кода, не меняя функциональности. Результат был таков:Размер запрошенных ресурсов, таких как CSS, изображения и JavaScript-файлы, значительно уменьшается。 Распространённые побочные эффекты минификации включают сокращение имён переменных до одного символа и удаление комментариев и ненужных пробелов. В то же время это можетЗапутать код, что не способствует тому, чтобы другие конкуренты читали наш исходный код.
Прирост производительности за счёт бандлинга и компрессии
В следующей таблице показаны различия между загрузкой ассетов по отдельности и использованием пакетирования и минификации:
Это экономит трафик и повышает скорость загрузки в плане сетевого транспорта, а также снижает количество HTTP-запросов и повышает скорость загрузки.
Для заголовков HTTP-запросов браузер очень детализирован. При объединении общая метрика передаваемых байтов значительно уменьшается. Время загрузки показывает значительное улучшение, но этот пример работает локально. Объединение и минификация могут сочетаться с ресурсами, перемещенными по сети, для достижения более высокого прироста производительности.
ASP.NET Core не имеет собственного комплектного и сжатого решения и нуждается в использовании решения, предоставленного третьей стороной, в этой статье используется «LigerShark.WebOptimizer.Core(В конце концов позвонила библиотека.)NUglifyРеализовать обработку JS и CSS), адрес GitHub:Вход по гиперссылке виден.
Сначала создайте новый проект ASP.NET Core 6 и выполните следующую команду для ссылки:
Создайте новую статическую папку в проекте wwwroot для хранения тестовых файлов css и js. Создайте новый CSS и JS-файл, как показано ниже:
Измените Program.cs файл и добавьте сервис WebOptimizer и промежуточное ПО, основной код выглядит следующим образом:
Когда мы пытаемся запустить проект, мы обнаруживаем, что комментарии к коду CSS и JS были удалены, файлы сжаты, а некоторые переменные в JS сокращены до одной буквы, как показано на рисунке ниже:
Затем создайте новый js-файл из статической папки, чтобы протестировать функцию объединения.Объедините test.js и test2.js в один common.js файл(и не генерирует common.js физический файл), конфигурационный код выглядит следующим образом:
Визуализации следующие:
Ссылка:
Вход по гиперссылке виден.
Вход по гиперссылке виден.
|
Опубликовано 28.03.2022 20:55:50
|
|
|
|
Хозяин|
Опубликовано 28.03.2022 20:56:47
|
Опубликовано 29.03.2022 00:38:21
|
(Я не знаю, как удалить дублирующиеся комментарии, пожалуйста, удалите этот пост, когда вебмастер его увидит)