#reactjs #caching #optimization #next.js #vercel
#reactjs #кэширование #оптимизация #next.js #vercel
Вопрос:
У меня есть страница с множеством статических ресурсов (изображения, видео, аудио), что очень плохо влияет на производительность страницы.
При проверке вкладки сеть я обнаруживаю, что все эти ресурсы не кэшируются (элемент управления кэшем есть public, max-age=0, must-revalidate
), несмотря на то, что я использую Vercel для развертывания.
Я что-то упускаю или есть какие-то другие способы дополнительной оптимизации?
Ответ №1:
Vercel кэширует ваш контент на границе, используя свою пограничную сеть.
Из документации по кэшированию Vercel:
Пограничная сеть Vercel кэширует ваш контент на границе, чтобы как можно быстрее передавать данные вашим пользователям.
Статическое кэширование выполняется автоматически для всех развертываний. Это означает, что в заголовки не нужно вносить никаких изменений.
Тем не менее, вы все равно можете настроить его, переопределив Cache-Control
заголовок.
По умолчанию мы возвращаем
Cache-Control
заголовок, содержащийpublic, max-age=0, must-revalidate
для предотвращения локального кэширования файла клиентами (например, браузерами). Это дает вам максимальную гибкость, поскольку пользователи получают последний файл из нашего глобального CDN сразу после развертывания. Это можно переопределить с помощью свойства Headers в вашемvercel.json
файле.