как кэшировать CSS, изображения и JS?

Question

Я хотел бы, чтобы изображения, CSS и JavaScript кэшировались на стороне клиента в их браузере при загрузке веб-страницы. Существует так много разных типов кэширования, которые я запутал, какие из них использовать с asp.net mvc.

Можно ли в браузерах проверять наличие новых или измененных версий этих файлов?

Спасибо!

Answer 1

Вам необходимо установить заголовки контроля кэша на сервере. Вы можете сделать это, вставив это в ваш 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>.

Answer 2

Браузеры позаботятся об этом автоматически. Вы должны стараться изо всех сил, чтобы они НЕ кэшировали css, js, html и изображения.

Я не очень хорошо знаком с ASP MVC, но я думаю, что тип кэширования, о котором вы думаете, это кэширование кода операции для созданного вами динамического вывода на стороне сервера?

Answer 3

@ Пол Криси и @Salsa оба правы в том, что браузеры будут обрабатывать кэширование по умолчанию, если ссылка одна и та же.

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

На этом сайте уже задан ряд вопросов о том, как обрабатывать предупреждения браузеров клиентов о обновлении кэша . Короче говоря, все они полагаются на изменение ссылки при изменении содержимого файла.

Вы можете добавить параметр к URL, который будет использоваться только для целей кэширования, например:

<script src="/myJavascript.js?version=4"></script>

Затем просто измените номер версии, когда вы измените содержимое и вам потребуется принудительное обновление на стороне клиента. этот ответ .

Answer 4

Взгляните на ответ , который я разместил здесь , для решения, которое максимизирует выгоду от использования кэширования и позволяет избежать проблем с необходимостью пользователям «жесткого» обновления ( Ctrl + F5 ).

Он использует MD5-хеш самого содержимого в URL-адресе, поэтому URL-адрес остается тем же, пока файл одинаков, что на самом деле является целью. Вычисление хэша происходит очень быстро, и оно кэшируется в памяти на сервере, поэтому рендеринг страниц заметно не замедляется. Все это измеряется в микросекундах, и преимущества (на моем сайте для аквалангистов ) до сих пор были потрясающими. Я применяю его ко всем изображениям, CSS и JS, за исключением изображений из файлов CSS, поскольку они не генерируются сервером на моем сайте (пока).

Answer 5

Лучше всего это сделать в IIS или в вашем конфигурационном файле - убедитесь, что ваши CSS / JS / изображения установлены так, чтобы никогда не истек.

Когда вы ссылаетесь на них из своего кода, я предлагаю добавить версию или дату сборки к имени файла, например, script.js? 20100120, так что когда вы захотите изменить их, вам просто нужно изменить версию, чтобы принудительно обновить все браузеры, которые ее кэшировали.

Answer 6

Кэширование на стороне клиента автоматически выполняется браузерами, когда вы правильно установили Заголовки Cache-Control и задали web.config. Вот так:

<system.webServer>
    <staticContent>
        <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00.00:10:00" />
    </staticContent>
</system.webServer>