前端緩存技術

1. 前端部署如何優化靜態資源緩存

前端部署優化靜態資源緩存主要通過在前端代碼中加入版本號或哈希值以及強制刷新頁面來實現。具體步驟如下：

每次代碼更新時，使用前端代碼構建工具（如 webpack）生成新的版本號或哈希值，這會使瀏覽器自動請求最新的代碼。手動指定時，每次更新代碼，修改版本號或哈希值。

為了防止用戶停留在舊頁面而使用舊版本的代碼，可以強制刷新頁面。方法有在頁面頭部加入提示讓用戶手動刷新，或通過 JS 強制刷新頁面。

加入版本號或哈希值確保用戶使用最新代碼，強制刷新頁面確保所有靜態資源也更新為最新版本。這樣可以避免用戶使用舊版本的代碼，提升用戶體驗。

在使用 webpack 生成哈希值時，配置文件中使用 [contenthash] 佔位符表示文件內容的哈希值。當文件內容變化，哈希值也隨之變化，確保每次代碼更新都會生成新文件名。

運行 webpack 構建代碼後，文件輸出到目標目錄，這樣在每次構建時，webpack 會自動為靜態資源生成哈希值，並將哈希值插入到模板文件中。

在構建工具中生成版本號的方法包括使用插件，如在 webpack 中，通過指定插件為靜態資源添加版本號。在模板文件中引用靜態資源時，使用生成的版本號，確保用戶獲取最新靜態資源。

在前端框架中，如 Vue.js，可以使用 vue.config.js 文件的 filenameHashing 選項添加版本號到靜態資源文件名，或使用 chunkhash 選項為文件名添加 chunkhash 值。

通過以上方法，前端部署可以有效優化靜態資源緩存，確保用戶始終訪問最新版本的代碼和靜態資源，提升用戶體驗和網站性能。

2. vue前端離開頁面前 防止表單數據丟失

要防止用戶在Vue前端離開頁面前表單數據丟失，可以利用Vue的keepalive組件進行表單內容的緩存。

具體實現方法如下：

1. 利用keepalive組件：

   • keepalive是Vue的內置組件，用於緩存不活躍的組件實例，而不是銷毀它們。這樣，當用戶返回頁面時，表單數據仍然保留在內存中。

2. 在App.vue中添加keepalive標簽：

   • 將需要緩存的表單頁面組件包裹在keepalive標簽內。可以通過include屬性指定需要緩存的組件名稱，或者通過exclude屬性排除不需要緩存的組件。

3. 在路由文件中添加meta屬性：

   • 可以在路由配置中為需要緩存的頁面添加meta屬性，例如meta: { keepAlive: true }，以便在編程時動態控制keepalive的行為。

4. 在跳轉的新頁面中添加beforeRouteLeave生命周期鉤子：

   • 在用戶離開當前表單頁面時，可以在beforeRouteLeave鉤子中執行一些操作，例如提示用戶保存表單數據，或者自動保存表單數據到localStorage等持久化存儲中。但請注意，這里主要討論的是利用keepalive緩存表單數據，因此通常不需要在beforeRouteLeave中保存數據到持久化存儲，除非有額外需求。

注意事項：

• keepalive只會緩存其直接子組件，而不會遞歸地緩存所有後代組件。因此，如果表單頁面組件嵌套在其他組件內部，需要確保keepalive直接包裹表單頁面組件。
• 使用keepalive時，需要注意組件的生命周期函數。特別是activated和deactivated這兩個生命周期函數，它們會在組件被激活和停用時調用。這可以用於在組件重新激活時執行一些初始化操作，或者在組件停用時執行一些清理操作。

通過上述方法，可以有效地防止用戶在Vue前端離開頁面前表單數據丟失的問題，提升用戶體驗。