Как кэшировать CSS, изображения и JS?
Я хотел бы, чтобы изображения, CSS и JavaScript кэшировались на стороне клиента в их браузере, когда они загружают веб-страницу. Существует так много разных типов кеширования, которые я запутал, какие из них использовать с asp.net mvc.
Возможно ли также, чтобы их браузеры проверяли новые или измененные версии этих файлов?
Спасибо!
6 ответов
Браузеры позаботятся об этом автоматически. Вы должны стараться изо всех сил, чтобы они НЕ кэшировали css, js, html и изображения.
Я не так хорошо знаком с ASP MVC, но я думаю, что они думают о том, кеширование ли это кода операции для созданного вами динамического вывода на стороне сервера?
Вам необходимо установить заголовки контроля кэша на сервере. Вы можете сделать это, вставив это в ваш web.config:
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
</staticContent>
</system.webServer>
Это скажет браузеру сейчас даже проверять наличие нового контента на любом статическом объекте в течение 30 дней.
Для вашего второго вопроса, предоставьте некоторый механизм добавления строки запроса к контенту. В моем текущем проекте мы сжимаем и комбинируем javascript и css как часть сборки. При размещении ссылок на странице это выглядит так:
<script src="/Resources/Javascript/Combined.js?v=2.2.0.1901" type="text/javascript"></script>
Строка запроса представляет собой номер Major.Minor.0.Changeset и изменяется каждый раз, когда мы запускаем сборку, вызывая ее повторную выборку клиентом. То же самое происходит с таблицами стилей в их <link> элемент.
@Paul Creasey и @Salsa верны в том, что браузеры будут обрабатывать кэширование по умолчанию, если ссылка одна и та же.
Как вы упомянули, возникает проблема, когда вам нужно обновить эти файлы, поскольку у вас нет гарантии, что браузер клиента проверит наличие обновленной версии. Во многих случаях они делают это только после того, как прошло определенное количество времени, что может создать неприятный пользовательский опыт.
На этом сайте уже задан ряд вопросов о том, как обрабатывать предупреждения браузеров клиентов об обновлении кэша. Короче говоря, все они полагаются на изменение ссылки при изменении содержимого файла.
Вы можете добавить параметр в URL, который будет использоваться только для целей кэширования, например:
<script src="/myJavascript.js?version=4"></script>
Затем просто измените номер версии, когда вы измените содержимое, и вам потребуется принудительно обновить клиентскую часть этого ответа.
Посмотрите на ответ, который я опубликовал здесь, для решения, которое максимизирует выгоду от использования кэширования и позволяет избежать любых проблем с необходимостью пользователям "жесткого" обновления (Ctrl+F5).
Он использует MD5-хеш самого содержимого в URL-адресе, поэтому URL-адрес остается неизменным, пока файл остается тем же, что и является целью. Вычисление хэша происходит очень быстро, и оно кэшируется в памяти на сервере, поэтому рендеринг страниц заметно не замедляется. Все это измеряется в микросекундах, и преимущества (на моем сайте для аквалангистов) до сих пор были потрясающими. Я применяю его ко всем изображениям, CSS и JS, за исключением изображений из файлов CSS, поскольку они не генерируются сервером на моем сайте (пока).
Лучше всего это сделать в IIS или в вашем конфигурационном файле - убедитесь, что ваши CSS/JS/ изображения настроены так, чтобы никогда не истекли.
Когда вы ссылаетесь на них из своего кода, я предлагаю добавить версию или дату сборки к имени файла, например, script.js?20100120, так что, когда вы действительно захотите изменить их, вам просто нужно изменить версию для принудительного обновления из всех браузеров, которые его кэшировали.
Кэширование на стороне клиента автоматически обрабатывается браузерами, когда вы правильно устанавливаете заголовки Cache-Control и устанавливаете web.config. Как это:
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00.00:10:00" />
</staticContent>
</system.webServer>