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

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

Кроме кэширования результатов действий контроллера для оптимизации работы приложения можно применять кэширование статического контекта. В данном случае статический контент - это файлы изображений, скрипты javascript, файлы стилей css, какие-то другие файлы, например, аудио-файлы, используемые на странице. Как правило, подобные файлы в проекте размещаются в папке wwwroot.

Для кэширования статических файлов при их отправке следует установить соответствующие заголовки. Для этого StaticFilesMiddleware передается объект StaticFileOptions, у которого устанавливается свойство OnPrepareResponse:

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

Свойство OnPrepareResponse представлят делегат Action - некоторое действие, которое в качестве параметра принимает объект StaticFileResponseContext. Через этот объект можно установить заголовки ответа, который будут посылаться вместе со статическими файлами. В частности, в данном случае устанавливается заголовок "Cache-Control", который задает параметры кэширования. Так, значение "public" указывает, что файл будет кэшироваться как в кэше браузера, так и на промежуточных прокси-серверах.

А параметр max-age задает время кэширования в секундах. Так, в данном случае файл кэшируется 10 минут (600 секунд).

То есть в данном случае метод Configure мог бы выглядеть следующим образом:

public void Configure(IApplicationBuilder app)
{
	app.UseStaticFiles(new StaticFileOptions()
	{
		OnPrepareResponse = ctx =>
		{
			ctx.Context.Response.Headers.Add("Cache-Control", "public,max-age=600");
		}
	});

	app.UseRouting();

	app.UseEndpoints(endpoints =>
	{
		endpoints.MapControllerRoute(
			name: "default",
			pattern: "{controller=Home}/{action=Index}/{id?}");
	});
}

При отправке запроса браузер получит вместе с файлами заголовки ответа, которые устанавливают параметры кэширования:

При повторной отправке запроса браузер будет доставать файлы из кэша:

Версии файлов

У кэширования есть недостаток: если мы изменим, например, содержимое файла css или javascript, то при повторном обращении к приложению браузер продолжит извлекать нужные файлы из кэша (если срок кэширования не истек). И таким образом, мы будем использовать старые версии файлов.

Для решения этой проблемы можно добавлять к статическим файлам версию и при каждом изменении файла соответственно менять версию файла:

<link rel="stylesheet" href="/css/site.css?v=123" />
<script src="/js/site.js?v=123"></script>
<img src="/images/banner1.svg?v=123" />

Если мы используем представления в рамках проекта MVC или RazorPages, то для автоматической генерации версии можно воспользоваться встроенными tag-хелперами LinkTagHelper, ScriptTagHelper и ImageTagHelper, которые с помощью атрибута asp-append-version="true" позволяют автоматически добавлять версию при изменении файла:

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<script src="~/js/site.js" asp-append-version="true"></script>
<img src="~/images/banner1.svg" asp-append-version="true" />