Кэширование в ASP.NET Core. Кэширование статических файлов

Содержание

Пример использования статических файлов в ASP.NET Core
Кэширование статических файлов в ASP.NET Core
Итого

Кроме кэширования результатов каких-либо действий нашего приложения также немаловажным элементом практически любого веб-приложения является кэширование статических файлов, например, js-скриптов, картинок/иконок и т.д., то есть таких элементов, которые могут вообще никогда не изменяться или изменяться крайне редко, но которые могут достаточно часто загружаться вместе со страницами веб-приложений. Рассмотрим моменты кэширования статических файлов в ASP.NET Core

Пример использования статических файлов в ASP.NET Core

Работу со статическими файлами в ASP.NET Core мы уже рассматривали. Поэтому сразу приведу пример приложения с которым мы будем работать. Это приложение имеет следующую структуру:

В папке wwwroot содержится два файла. CSS-файл имеет следующее содержание:

h1 {
    font-family: 'Arial', 'Verdana', sans-serif;
}

p {
    font-family: 'Arial';
    font-size: 21px;
}

Файл index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Static File</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h1>Пример использования CSS</h1>
    <p>Это простой текст</p>
</body>
</html>

Класс Program приложения:

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);
        var app = builder.Build();
        app.UseDefaultFiles();
        app.UseStaticFiles();
        app.Run();
    }
}

Если запустить приложение, то мы увидим следующий текст и информацию в консоли разработчика в браузере:

Вместе с загрузкой html-страницы также загружается и css-файл. Для нашего приложения — это мелочь, но современные веб-приложения могут подгружать довольно большие css-файлы и файлы со скриптами, что может серьезно повлиять на производительность нашего приложения. Рассмотрим, как мы можем кэшировать статический контент в ASP.NET Core

Кэширование статических файлов в ASP.NET Core

Основной заголовок HTTP, используемый для кэширования — cache-Control, который используется для указания директив кэша. Этот заголовок мы должны установить в настройках компонента middleware, встраиваемого в конвейер обработки запросов методом UseStaticFiles(). Сделать это можно следующим образом:

app.UseStaticFiles(new StaticFileOptions() 
 {
     OnPrepareResponse = opts => 
     {
         opts.Context.Response.Headers.Add("cache-Control", "public,max-age=60");
     }
 });

Свойство OnPrepareResponse у объекта StaticFileOptions — это делегат Action который принимает объект StaticFileResponseContext в качестве параметра. Через этот объект мы можем получить доступ к HttpContext и, следователь, установить заголовки ответа, которые будут отправляться вместе со статическими файлами.

В примере выше мы устанавливаем заголовок «Cache-Control», который задает параметры кэширования, а именно:

значение «public» указывает, что файл будет кэшироваться как в кэше браузера, так и на промежуточных прокси-серверах.
значение «max-age» указывает время кэширования в секундах.

Посмотрим, как будет работать наше приложение с такими настройками работы со статическими файлами:

первый запуск

Второй и последующие загрузки страницы:

Как можно видеть на втором скриншоте, файл style.css был загружен из кэша и, при этом, на его загрузку вместо 10 мс ушло 0 мс, что говорит о том, что наша настройка кэширования статических файлов в ASP.NET Core работает.

Итого

Для кэширования статических файлов в ASP.NET Core мы должны передать настройки StaticFileOptions в метод UseStaticFiles, определив в настройках делегат, принимающий в качестве параметра объект StaticFileResponseContextс помощью которого устанавливается заголовок cache-Control. Кэширование статических файлов может значительно повысить производительность вашего веб-приложения в случае, если используется большое количество статических файлов.