Вимоги: У попередніх проєктах 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 фізичний файл), конфігураційний код виглядає так:
Зображення такі:
Посилання:
Вхід за гіперпосиланням видно.
Вхід за гіперпосиланням видно.
|
Опубліковано 2022-3-28 20:55:50
|
|
|
|
Орендодавець|
Опубліковано 2022-3-28 20:56:47
|
Опубліковано 29.03.2022 00:38:21
|
(Я не знаю, як видалити дублікати коментарі, будь ласка, видаліть цей пост, коли вебмайстер його побачить)