Java 如何確保 JS 不被快取

威哥爱编程發表於2024-10-21
JavaJS快取

大家好，我是 V 哥。今天咱們來聊一聊 Java 後端確保 JavaScript 不被快取的問題，先來了解一下為什麼需要這樣做，通常源於以下幾種場景或問題：

1. 先來看幾個問題

1. 檔案更新後無法及時生效

瀏覽器快取機制是為了加快載入速度和減少伺服器壓力，但有時會帶來問題。當 JavaScript 檔案更新後，如果瀏覽器從快取中載入舊版本，使用者就無法看到最新的功能或修復的 Bug。舉個例子：開發者釋出了新版本的前端程式碼，修復了一個關鍵問題，但使用者的瀏覽器仍然使用快取的舊程式碼，導致問題依然存在。使用者可能以為網站沒修復或出現新問題，從而影響使用者體驗。

2. 前後端不一致

在 Java Web 應用中，JavaScript 通常用於與後端服務互動。如果 JavaScript 程式碼版本和後端邏輯不一致，可能導致不相容問題。舉個例子：後端介面的請求格式發生變化，但瀏覽器仍然使用舊的 JavaScript 程式碼，結果是客戶端與伺服器之間通訊失敗，產生錯誤。

3. 影響除錯與開發

在開發和除錯環境中，快取會導致程式碼變更後無法即時看到效果，這對於除錯過程非常不便。開發者可能會在除錯中發現修改的程式碼沒有被應用，導致浪費時間。舉個例子：開發者修改了 JavaScript 檔案，但由於快取，瀏覽器繼續執行舊的程式碼，開發者無法驗證新程式碼是否正確，甚至可能以為程式碼本身有問題。

4. 安全問題

舊的快取可能會暴露系統之前存在的漏洞。即使後端做了升級，修復了安全漏洞，但如果瀏覽器載入了舊的 JavaScript 檔案，可能仍然會受到攻擊。舉個例子：假設某個版本的 JavaScript 中存在一個 XSS 漏洞。雖然新版本已經修復了這個漏洞，但瀏覽器快取的舊檔案仍然暴露在攻擊風險中。

所以，如果前端頁面無法及時響應更新（如修復 Bug、最佳化功能等），使用者體驗可能會受到負面影響。特別是在進行產品版本迭代時，快取問題可能會使新功能看起來未上線，影響使用者的使用體驗和滿意度。

2. 那要如何解決呢？

在 Java Web 開發中，為了確保 JavaScript 檔案（或任何靜態資源）不被瀏覽器快取，可以使用以下幾種經驗：

1. 使用版本號或時間戳

為 JavaScript 檔案的 URL 新增一個版本號或時間戳，使得每次檔案更新後 URL 不同，這樣瀏覽器會認為是新的資源，從而重新載入。比如：

<script src="app.js?v=1.0.1"></script>

或者使用動態的時間戳：

<script src="app.js?t=<%= System.currentTimeMillis() %>"></script>

透過這種方式，每次生成不同的查詢引數，瀏覽器會認為這是一個新的檔案，不會從快取中讀取。

2. 設定 HTTP 響應頭

在 Java 後端（比如 Spring Boot 或 Servlet），可以透過設定 HTTP 頭來控制快取。常見的 HTTP 頭包括：

  • Cache-Control: 控制快取行為。
  • Pragma: 控制快取行為（主要用於相容 HTTP/1.0）。
  • Expires: 設定資源過期的時間。

示例程式碼（Spring Boot 過濾器）：

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class NoCacheFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) 
        throws IOException, ServletException {
        
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Cache-Control", "no-store, no-cache, must-revalidate, max-age=0");
        httpResponse.setHeader("Pragma", "no-cache");
        httpResponse.setHeader("Expires", "0");
        
        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {}

    @Override
    public void destroy() {}
}

3. 配置靜態資源的快取策略

在 Spring Boot 專案中，可以透過配置類來定義靜態資源的快取策略。例如：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/js/**")
                .addResourceLocations("classpath:/static/js/")
                .setCachePeriod(0); // 0 表示不快取
    }
}

透過 setCachePeriod(0) 設定快取週期為 0，強制瀏覽器每次都從伺服器獲取最新的 JavaScript 檔案。

4. 使用 ETag 或 Last-Modified

在 HTTP 響應中設定 ETag 或 Last-Modified，這樣瀏覽器在每次請求時都會詢問伺服器資源是否更新。如果沒有變化，伺服器會返回 304 狀態碼，從而避免不必要的重新載入。

示例（設定 Last-Modified）：

httpResponse.setDateHeader("Last-Modified", System.currentTimeMillis());

上面的幾種方法，能確保瀏覽器及時獲取最新版本的 JavaScript 檔案，不使用快取的舊版本。

關於一些思考

問題來了，那什麼時候可以使用快取？

雖然快取可能帶來這些問題，但並不意味著快取永遠不好。在某些場景中，使用瀏覽器快取可以顯著提升效能：

  • 靜態資源（如 JavaScript、CSS 檔案）較少更改時，快取可以顯著減少網路請求，提升頁面載入速度。
  • 確保在更新時有效控制快取機制（比如用檔案的版本號或雜湊值作為檔名的一部分）可以避免不必要的重新下載和過度載入。

如何平衡？

通常，咱們不會完全禁止快取，而是透過版本號、雜湊、快取控制頭等方式來平衡效能和更新問題。這樣，瀏覽器在沒有必要時可以利用快取，而在需要時也能獲取最新的資源。關注威哥愛程式設計，碼碼通暢不掉髮。

相關文章