navegadores - evitar cache javascript

Mejor forma de evitar el almacenamiento en caché del navegador de archivos JavaScript

Question

Así es como evitamos que los navegadores almacenen en caché los archivos JS y CSS. Esto parece un poco hacky ... ¿hay una mejor manera?

<%
//JSP code
long ts = (new Date()).getTime(); //Used to prevent JS/CSS caching
%>

<link rel="stylesheet" type="text/css" media="screen" href="/css/management.css?<%=ts %>" />
<script type="text/javascript" src="/js/pm.init.js?<%=ts %>"></script> 
<script type="text/javascript" src="/js/pm.util.func.js?<%=ts %>"></script> 

Actualización: la razón por la que queremos evitar el almacenamiento en caché es asegurarnos de que la versión más nueva de los archivos se cargue cuando hacemos una nueva versión.

Answer 1

Desea que CSS y JS se almacenen en caché. Acelera la carga de la página web cuando vuelven. Al agregar una marca de tiempo, su usuario se verá obligado a descargarlo una y otra vez.

Si desea asegurarse de que siempre tengan una nueva versión, haga que su sistema de compilación agregue un número de compilación al final del archivo en lugar de una marca de tiempo.

Si tiene problemas solo en dev, asegúrese de configurar sus navegadores para que no almacenen en caché los archivos o establezca encabezados en sus páginas dev para que no se almacenen en caché.

Answer 2

El almacenamiento en caché es tu amigo. Si los navegadores están guardando en caché estos archivos incorrectamente, significa que algo está mal con los encabezados HTTP que su servidor web está enviando junto con los archivos JS y CSS (no la página HTML que los usa). El navegador usa esos encabezados para determinar si puede almacenar en caché el archivo.

Su servidor web puede enviar estos encabezados (en cada archivo JS y CSS que sirve) para indicarles a los navegadores que no los almacenen en la memoria caché:

Cache-Control: no-cache
Pragma: no-cache
Expires: Sat, 01 Jan 2000 00:00:00 GMT

Pero eso aumentará la carga de red en su sitio, y los usuarios verán que la carga de la página es más lenta. Podría ser un poco más indulgente y permitir que el navegador guarde en caché el archivo CSS durante 60 segundos:

Cache-Control: max-age=60

Si realmente desea que el navegador compruebe si hay un nuevo archivo con cada carga de página, aún puede guardar algo de tráfico de red mediante un ETag:

Cache-Control: max-age=0
Pragma: no-cache
Expires: Sat, 01 Jan 2000 00:00:00 GMT
ETag: "o2389r-98ur0-w3894tu-q894"

ETag es simplemente un identificador único que su servidor web crea cada vez que cambia el archivo. La próxima vez que el navegador quiere el archivo, le pregunta al servidor, "¿/js/pm.init.js todavía tiene ETag o2389r98ur0w3894tuq894?" y si es así, su servidor simplemente dice "sí". De esta forma, su servidor no tiene que enviar todo el archivo nuevamente, y el usuario no tiene que esperar a que se cargue. Ganar-ganar

Cómo convencer a su servidor web para que genere ETags automáticamente depende del servidor. Por lo general, no es difícil.

He visto el truco que estás usando antes. Al igual que en la Web, no es bonito ni particularmente eficiente, pero funciona.

Answer 3

Para fines de depuración, instale la barra de herramientas del desarrollador web para FireFox y active allí "desactivar caché"

Actualizar:
Cuando tiene instalado FireBug, también puede deshabilitar el almacenamiento en caché en la configuración de la pestaña de red .

Answer 4

Si la razón por la que queremos evitar el almacenamiento en caché es asegurarnos de que la versión más nueva de los archivos se cargue cuando hacemos una nueva versión. , desea que el nuevo js se cargue cuando HAY una NUEVA versión, no todas las veces.

Para hacer eso, desea que el valor "ts" esté vinculado con el archivo, no con la hora del día. Puede usar uno de estos sistemas:

1. ts = Marca de tiempo DEL ARCHIVO
2. ts = MD5 (o cualquier suma de comprobación) del ARCHIVO
3. ts = versión del código. Si tiene una secuencia de comandos que realiza la implementación, asegúrese de que agrega el código de la versión (o la fecha de la versión) en algún archivo de inclusión que se asignará a ts.

De esta forma, el navegador volverá a cargar el archivo solo si es nuevo y no todas las veces.

Answer 5

Si puede incluir el filtro de servlets Java en su aplicación, aquí hay una solución de trabajo: CorrectBrowserCacheHandlerFilter.java

Básicamente, cuando su navegador solicita los archivos estáticos, el servidor redirigirá todas las solicitudes al mismo pero con un parámetro de consulta hash ( ?v=azErT por ejemplo) que depende del contenido del archivo estático de destino.

Al hacer esto, el navegador nunca almacenará en caché los archivos estáticos declarados en su index.html por ejemplo (porque siempre recibirá un 302 Moved Temporarily ), pero solo almacenará en caché los que tienen la versión hash (el servidor responderá 200 para ellos). Por lo tanto, la memoria caché del navegador se utilizará de manera eficiente para los archivos estáticos con la versión hash.

Descargo de responsabilidad: soy el autor de CorrectBrowserCacheHandlerFilter.java .

Answer 6

Un enfoque simple para esto sería usar la última fecha de modificación de los archivos js o css en la URL en lugar de una marca de tiempo. Esto tendría el efecto de evitar el almacenamiento en caché solo cuando haya una nueva versión del archivo en el servidor.

Answer 7

Editar

En caso de que esté utilizando Spring Boot, ahora es mucho más simple prevenir el almacenamiento en caché de archivos modificados.

Todo lo que necesita hacer es agregar esto a application.properties:

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

Si está utilizando Thymeleaf o FreeMarker está completamente configurado automáticamente. Si está utilizando JSPs necesita declarar manualmente un ResourceUrlEncodingFilter.

Lea más aquí: http://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-static-content

Lo que sigue ahora es mi publicación "vieja" que también funciona pero requiere más trabajo.

Como está utilizando Java, existe la posibilidad de que también esté utilizando maven para administrar su proyecto.

En ese caso, para mejorar el rendimiento y asegurarse de que ningún navegador almacena en caché sus recursos estáticos cuando se produce una nueva versión de su software, debe combinar todas sus hojas de estilo y archivos de JavaScript en un solo archivo de su tipo, y debe hacer que sus URL de recursos cambien cuando crea una nueva versión.

Afortunadamente maven puede hacer todo esto por ti en tiempo de compilación. Necesitarás minify-maven-plugin y maven-replacer-plugin .

Este extracto de un pom.xml debería ayudarte a comenzar:

<properties>
    <timestamp>${maven.build.timestamp}</timestamp>
    <maven.build.timestamp.format>yyyyMMddHHmm</maven.build.timestamp.format>
</properties>

<plugin>
    <groupId>com.samaxes.maven</groupId>
    <artifactId>minify-maven-plugin</artifactId>
    <version>1.6</version>
    <executions>
        <execution>
            <id>minify-css</id>
            <phase>process-resources</phase>
            <goals>
                <goal>minify</goal>
            </goals>
            <configuration>
                <linebreak>-1</linebreak>
                <cssSourceDir>resources/css</cssSourceDir>
                <cssSourceFiles>
                    <cssSourceFile>bootstrap.css</cssSourceFile>
                    <cssSourceFile>style.css</cssSourceFile>
                </cssSourceFiles>
                <cssTargetDir>resources/css</cssTargetDir>
                <cssFinalFile>${timestamp}.css</cssFinalFile>
            </configuration>
        </execution>
        <execution>
            <id>minify-js</id>
            <phase>process-resources</phase>
            <goals>
                <goal>minify</goal>
            </goals>
            <configuration>
                <linebreak>-1</linebreak>
                <jsSourceDir>resources/js</jsSourceDir>
                <jsSourceFiles>
                    <jsSourceFile>jquery.js</jsSourceFile>
                    <jsSourceFile>bootstrap.js</jsSourceFile>
                    <jsSourceFile>script.js</jsSourceFile>
                </jsSourceFiles>
                <jsTargetDir>resources/js</jsTargetDir>
                <jsFinalFile>${timestamp}.js</jsFinalFile>
            </configuration>
        </execution>
    </executions>
</plugin>

<plugin>
    <groupId>com.google.code.maven-replacer-plugin</groupId>
    <artifactId>replacer</artifactId>
    <version>1.5.2</version>
    <executions>
        <execution>
            <id>replaceDynPartInResourcePath</id>
            <phase>prepare-package</phase>
            <goals>
                <goal>replace</goal>
            </goals>
            <configuration>
                <ignoreMissingFile>false</ignoreMissingFile>
                <basedir>${project.build.directory}</basedir>
                <file>${project.artifactId}/WEB-INF/views/header.jsp</file>
                <regex>false</regex>
                <replacements>
                    <replacement>
                        <token>$dynamicResourceNamePart$</token>
                        <value>${timestamp}</value>
                    </replacement>
                </replacements>
            </configuration>
        </execution>
    </executions>
</plugin>

Esta es la forma de incluir sus recursos estáticos en header.jsp

<c:choose>
    <c:when test="${not fn:contains(pageContext.request.serverName, ''localhost'') and empty param.nocombine}">
        <link href="${pageContext.request.contextPath}/resources/css/$dynamicResourceNamePart$.min.css" rel="stylesheet" type="text/css" />
        <script src="${pageContext.request.contextPath}/resources/js/$dynamicResourceNamePart$.min.js" type="text/javascript"></script>
    </c:when>
    <c:otherwise>
        <link href="${pageContext.request.contextPath}/resources/css/bootstrap.css" rel="stylesheet">
        <link href="${pageContext.request.contextPath}/resources/css/style.css" rel="stylesheet">
        <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/bootstrap.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/script.js"></script>
    </c:otherwise>
</c:choose>