Como cache CSS, imagens e JS?

Question

Eu gostaria de ter imagens, CSS e JavaScript cache em cache no lado do navegador quando eles carregam uma página da web. Existem tantos tipos diferentes de cache que estou confuso sobre quais usar com o ASP.NET MVC.

Também seria possível fazer com que seus navegadores verificassem versões novas ou modificadas desses arquivos?

Obrigado!

Answer 1

Os navegadores cuidam disso para você automaticamente, na verdade. Você tem que sair do seu caminho para fazê -los não cache CSS, JS, HTML e imagens.

Não estou tão familiarizado com o ASP MVC, mas acho que eles são o tipo de cache em que você está pensando é o cache de código Opcode para o seu servidor de saída dinâmica criada?

Answer 2

Você precisa definir cabeçalhos de controle de cache no servidor. Você pode fazer isso colocando isso em seu web.config:

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

Isso diria ao navegador agora para verificar se há um novo conteúdo em qualquer coisa estática por 30 dias.

Para sua segunda pergunta, forneça algum mecanismo de adição de uma consulta ao conteúdo. No meu projeto atual, comprimimos e combinamos e JavaScript e CSS como parte da construção. Ao colocar links na página, parece:

<script src="/Resources/Javascript/Combined.js?v=2.2.0.1901" type="text/javascript"></script>

O número de consulta é o principal.Minor.0.ChangeSet Número e alterações sempre que pressionamos uma compilação, fazendo com que o cliente a busque. O mesmo exato acontece nas folhas de estilo em seus <link> elemento.

Answer 3

@Paul Creasey e @Salsa estão corretos de que os navegadores lidam com o cache por padrão, desde que o link seja o mesmo.

Como você mencionou, isso levanta um problema quando você precisa atualizar esses arquivos, pois não tem garantia de que o navegador do cliente verá uma versão atualizada. Em muitos casos, eles apenas fazem isso após o passar do tempo fixo, o que pode criar uma experiência de usuário ruim.

Já há várias perguntas feitas neste site sobre como lidar com alertar os navegadores do cliente para Atualize o cache. Em suma, todos eles dependem de alterar o link quando você altera o conteúdo do arquivo.

Você pode anexar um parâmetro ao URL que será usado apenas para fins de cache, como:

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

Em seguida, basta alterar o número da versão quando você mudar o conteúdo e precisar forçar um refresco do lado do cliente Ala esta resposta.

Answer 4

Dê uma olhada no resposta eu postei aqui Para uma solução que maximiza o benefício do uso do cache e evita problemas com a necessidade dos usuários para refrescar "Hard" (Ctrl+F5).

Ele usa um hash do MD5 do próprio conteúdo no URL, para que o URL permaneça o mesmo, desde que o arquivo seja o mesmo, o que é realmente o objetivo. O cálculo do hash é super rápido e está em cache na memória no servidor, para que a renderização da página não seja visivelmente desacelerada. A coisa toda é medida em microssegundos, e os benefícios foram (em meu site para mergulhadores mergulhadores) incrível até agora. Aplico-o a todas as imagens, CSS e JS, com exceção das imagens dos arquivos dentro do CSS, pois eles não são gerados pelo servidor no meu site (ainda).

Answer 5

É melhor fazer isso no IIS ou no seu arquivo de configuração - verifique se o seu CSS/JS/imagens está definido para nunca expirar.

Quando você os faz referência a seu código, sugiro anexar uma versão ou de construção ao nome do arquivo, por exemplo, script.js? De todos os navegadores que o armazenaram em cache.

Answer 6

O cache do lado do cliente é tratado automaticamente pelos navegadores quando você definido corretamente Cabeçalhos de controle de cache e defina web.config. Curtiu isso :

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