Angular13应用部署JBoss/Tomcat后缓存问题求助

核心原因分析 #

你已经用了--output-hashing=all给静态资源（JS/CSS）加了唯一哈希，理论上更新后资源URL会自动变更，浏览器应该拉取新文件。问题大概率出在入口文件index.html被浏览器缓存——浏览器加载旧的index.html，里面引用的还是旧哈希的资源，所以必须强制刷新才能获取新的入口文件。

服务器端配置方案 #

可以通过配置Tomcat/JBoss，给index.html设置强制不缓存的HTTP响应头，同时让带哈希的静态资源长期缓存（兼顾性能）。

1. Tomcat 配置 #

方法一：通过web.xml添加缓存控制过滤器

在WAR包的WEB-INF/web.xml中添加以下配置：

<filter>
    <filter-name>CacheControlFilter</filter-name>
    <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
    <!-- 给index.html设置不缓存 -->
    <init-param>
        <param-name>ExpiresByType text/html</param-name>
        <param-value>access plus 0 seconds</param-value>
    </init-param>
    <!-- 带哈希的静态资源设置长期缓存（365天） -->
    <init-param>
        <param-name>ExpiresByType application/javascript</param-name>
        <param-value>access plus 31536000 seconds</param-value>
    </init-param>
    <init-param>
        <param-name>ExpiresByType text/css</param-name>
        <param-value>access plus 31536000 seconds</param-value>
    </init-param>
    <init-param>
        <param-name>ExpiresByType image/png</param-name>
        <param-value>access plus 31536000 seconds</param-value>
    </init-param>
    <init-param>
        <param-name>ExpiresByType image/jpeg</param-name>
        <param-value>access plus 31536000 seconds</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CacheControlFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

方法二：通过context.xml配置

在Tomcat的conf/context.xml（或WAR包的META-INF/context.xml）中添加：

<Context>
    <Valve className="org.apache.catalina.valves.ExpiresValve"
           expires="text/html: 0, application/javascript: max, text/css: max, image/png: max, image/jpeg: max"/>
</Context>

2. JBoss 配置 #

方法一：通过jboss-web.xml设置缓存头

在WAR包的WEB-INF/jboss-web.xml中添加：

<jboss-web>
    <context-root>/your-app-root</context-root>
    <valve>
        <class-name>org.apache.catalina.valves.ExpiresValve</class-name>
        <param>
            <param-name>expires</param-name>
            <param-value>text/html: 0, application/javascript: max, text/css: max, image/png: max, image/jpeg: max</param-value>
        </param>
    </valve>
</jboss-web>

方法二：通过Undertow配置（适用于JBoss EAP 7+）

在JBoss的standalone.xml或domain.xml中修改Undertow子系统：

<subsystem xmlns="urn:jboss:domain:undertow:12.0">
    <server name="default-server">
        <host name="default-host" alias="localhost">
            <location name="/" handler="welcome-content"/>
            <filter-ref name="cache-control"/>
            <filter-ref name="cache-control-html"/>
        </host>
    </server>
    <filters>
        <response-header name="cache-control" header-name="Cache-Control">
            <condition>
                <not>
                    <path-suffix value=".html"/>
                </not>
            </condition>
            <header-value>public, max-age=31536000</header-value>
        </response-header>
        <response-header name="cache-control-html" header-name="Cache-Control">
            <condition>
                <path-suffix value=".html"/>
            </condition>
            <header-value>no-cache, no-store, must-revalidate</header-value>
        </response-header>
    </filters>
</subsystem>

额外补充：Angular端辅助优化 #

如果服务器配置后仍有个别场景缓存问题，可在Angular的index.html中手动添加meta标签（优先级低于服务器配置，建议以服务器配置为主）：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

内容的提问来源于stack exchange，提问作者Davide.77