Подтвердить что ты не робот

Как кешировать css, изображения и js?

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

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

Спасибо!

4b9b3361

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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