如何強制客戶端重新整理 JavaScript 檔案？

本教程將教會我們如何強制客戶端重新整理 JavaScript 檔案。

現在，問題是，為什麼我們需要強制客戶端重新整理 JavaScript 檔案？讓我們透過一個示例問題來理解它。假設我們已經部署了應用程式，並且許多使用者正在使用我們的應用程式。現在，為了提高應用程式的效能和使用者介面，我們將持續改進我們的應用程式，並在每個時期後升級其版本。顯然，升級應用程式版本後，我們也會將其推送到生產環境。但是有時，在使用者螢幕上，客戶端 JavaScript 或 CSS 不會升級，即使我們將新程式碼推送到生產環境，它也會顯示舊版本的應用程式。

你能想到為什麼會出現這個問題嗎？請繼續閱讀以瞭解答案。當用戶第一次在瀏覽器中開啟我們的應用程式時，瀏覽器會將該網頁的快取儲存在本地儲存中。因此，當用戶下次從同一瀏覽器訪問該網頁時，由於儲存的快取，載入速度不會太慢。因此，在我們的案例中，儲存的快取造成了問題。我們將應用程式的程式碼升級到了生產環境，但瀏覽器從本地儲存（或我們可以說快取）中獲取 CSS 和 JavaScript 檔案。瀏覽器不是從伺服器重新載入新檔案，而是從快取載入並向用戶顯示舊版本的應用程式。

我們已經在下面解釋了一些解決方案，以便在升級應用程式後從伺服器重新載入 JavaScript 檔案。

強制重新整理瀏覽器

最簡單的解決方案是強制重新整理瀏覽器。使用者可以在開啟應用程式視窗後按ctrl + F5或ctrl + shift + R強制重新整理瀏覽器。在 Mac 上，使用者可以按cmd + R。它將再次從伺服器重新載入所有檔案，如果您已更新 JavaScript 檔案，它將替換客戶端瀏覽器本地快取中的升級檔案。

強制重新整理瀏覽器的另一種方法是按住 ctrl 鍵並單擊瀏覽器左上角的重新整理按鈕。Mac 使用者必須按住cmd鍵並單擊重新整理按鈕。

太好了！此解決方案有效，因為您進行強制重新整理；它會從伺服器重新載入所有檔案。但是，每次升級應用程式時都告訴應用程式使用者強制重新整理瀏覽器好嗎？這不是一個好習慣。因此，我們在下面提出了另一個最佳解決方案。

更改指令碼標籤中的檔案路徑

在這種方法中，我們將更改 JavaScript 指令碼標籤中的源 URL，以欺騙瀏覽器並再次從伺服器重新載入所有更改的檔案。我們只需在檔案的源 URL 後新增一些查詢引數。

使用者可以按照以下語法在源標籤中編輯源 URL。

語法

  • 舊指令碼標籤

<script type = "text/javascript" src = "script.js" > </script>

  • 新指令碼標籤

<script type = "text/javascript" src = "script.js?$version" > </script>

引數

  • version − 使用者可以新增任何字串作為版本來跟蹤新版本。最普遍的方法是新增任何版本，但使用者也可以新增日期和時間以使其唯一。

示例

下面的示例演示瞭如何在每次升級應用程式版本時動態附加日期和時間。

<script type="text/javascript">  
   //get the date and time
   var currentDate = (new Date()).getTime();  
   
   //create new script element
   var newScriptElement = document.createElement("script");  
   newScriptElement.type = "text/javascript";  
   
   // add current date to URL as a query parameter
   newScriptElement.src = "script.js?" + currentDate;  
   
   // append new script element to body.
   document.body.appendChild(newScriptElement);  
</script>

使用者可以看到我們在上面的示例中將日期和時間附加到了指令碼檔案源 URL。當瀏覽器嘗試使用更新的 URL 查詢指令碼檔案時，它將無法從本地快取中獲取它。之後，瀏覽器必須需要從伺服器重新載入它。

此外，使用者可以透過編輯 .htaccess 檔案來實現此目的：

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \.(bmp|png|gif|css|js)$ [NC]
RewriteCond %{QUERY_STRING} !^(.+?&v50|)v=50[^&]*(?:&(.*)|)$ [NC]
RewriteRule ^ %{REQUEST_URI}?v=50 [R=301,L]

這樣，每當我們將應用程式的更新推送到生產環境時，我們就可以使瀏覽器自動重新載入 JavaScript 檔案。

告訴使用者強制重新整理和清除快取以檢視客戶端應用程式的新版本並不是一個好習慣。因此，開發人員可以使用第二種方法，只需向檔案路徑新增查詢引數即可使其自動重新載入所有更新的檔案。

更新於：2022年8月10日

瀏覽量：11K+

啟動您的職業生涯

完成課程後獲得認證

開始
廣告