WHAT - 靜態資源緩存穿透

文章目錄

  • 1. 動態哈希命名的基本思路
  • 2. 具體實現
    • 2.1 Vite/Webpack 配置動態哈希
    • 2.2 HTML 文件中動態引用
      • 手動引用
      • 使用 index.html 模板動態插入
    • 2.3 結合 `Cache-Control` 避免緩存穿透
    • 2.4 適用于多環境的動態策略
  • 總結

在多環境部署中,靜態資源緩存穿透是一個常見問題,尤其是當前端或后端的靜態資源未正確更新,導致舊版本被意外加載。

對于這種問題,動態哈希命名策略是一種有效的解決方案,通過給資源文件添加哈希值來確保瀏覽器獲取最新版本。注意,一般在打包工具的 production 生產模式下 build 后的產物都會自動使用哈希命名配置,無需手動配置。今天主要是介紹背后的實現原理,以下是具體的實現方式:

1. 動態哈希命名的基本思路

  • 在構建時,為靜態資源(JS、CSS、圖片等)文件名添加基于內容的哈希值(如 MD5、SHA-256)。
  • 在 HTML 或配置文件中,引用時使用帶有哈希值的文件名,確保每次構建后的新文件名唯一,避免緩存問題。
  • 結合 Cache-Control 策略,讓瀏覽器長時間緩存文件,只有當文件內容變更時才會重新下載。

2. 具體實現

2.1 Vite/Webpack 配置動態哈希

在 Vite(或 Webpack)中,可以通過 build.rollupOptions.outputoutput.filename 進行哈希處理:

Vite (vite.config.ts)

import { defineConfig } from 'vite';export default defineConfig({build: {assetsDir: 'assets',rollupOptions: {output: {entryFileNames: 'assets/[name].[hash].js',chunkFileNames: 'assets/[name].[hash].js',assetFileNames: 'assets/[name].[hash].[ext]',}}}
});

Webpack (webpack.config.js)

module.exports = {output: {filename: 'js/[name].[contenthash].js',chunkFilename: 'js/[name].[contenthash].js',},
};

這樣,每次構建時,生成的 JS/CSS 文件都會帶上基于內容的 hash,確保不同版本的文件不會相互覆蓋。

2.2 HTML 文件中動態引用

手動引用

在 HTML 中,可以通過 <script><link> 直接引入帶哈希的文件:

<script src="/assets/app.abc123.js"></script>

使用 index.html 模板動態插入

如果是 Vite,可以使用 vite-plugin-html 插件:

import { createHtmlPlugin } from 'vite-plugin-html';export default defineConfig({plugins: [createHtmlPlugin({inject: {data: {title: 'My App',},},}),],
});

index.html 中:

<script type="module" src="<%= htmlWebpackPlugin.files.js %>"></script>

2.3 結合 Cache-Control 避免緩存穿透

nginxCDN 服務器配置 Cache-Control,讓靜態資源長期緩存:

location /assets/ {expires max;add_header Cache-Control "public, immutable";
}

immutable 表示文件不會更改,即使 304 Not Modified 也不需要重新驗證。

同時,確保 index.html 不被緩存,以便引用最新的哈希文件:

location / {expires -1;add_header Cache-Control "no-cache, must-revalidate";
}

2.4 適用于多環境的動態策略

vite.config.tswebpack.config.js 中,可以根據環境變量來控制 hash 策略:

const isProduction = process.env.NODE_ENV === 'production';export default defineConfig({build: {rollupOptions: {output: {entryFileNames: isProduction ? 'assets/[name].[hash].js' : 'assets/[name].js',},},},
});

這樣,在 開發環境 中不會生成哈希,方便調試,而 生產環境 則啟用哈希。

總結

  • 通過 文件名+哈希 方式,確保靜態資源變更時不會被緩存攔截。
  • 配置 Nginx/CDNindex.html 不緩存,而 JS/CSS 采用長時間緩存。
  • Vite/Webpack 結合 環境變量 實現多環境適配。

這樣就能有效解決緩存穿透問題,讓前端資源在多環境部署時始終保持最新!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/77848.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/77848.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/77848.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

PoCL環境搭建

PoCL環境搭建 **一.關鍵功能與優勢****二.設計目的****三.測試步驟**1.創建容器2.安裝依賴3.編譯安裝pocl4.運行OpenCL測試程序 Portable Computing Language (PoCL) 簡介 Portable Computing Language (PoCL) 是一個開源的、符合標準的異構計算框架&#xff0c;旨在為 OpenCL…

【區塊鏈技術解析】從原理到實踐的全鏈路指南

目錄 前言&#xff1a;技術背景與價值當前技術痛點解決方案概述目標讀者說明 一、技術原理剖析核心概念圖解核心作用講解關鍵技術模塊技術選型對比 二、實戰演示環境配置要求核心代碼實現&#xff08;10個案例&#xff09;案例1&#xff1a;創建簡單區塊鏈案例2&#xff1a;工作…

在Windows上安裝Git

一、安裝 Git 下載 Git地址&#xff1a;Git - Downloads (git-scm.com) 1、在頁面中找到適用于 Windows 系統的最新版本安裝包&#xff08;通常為.exe 格式文件&#xff09;&#xff0c;點擊下載鏈接。 出于訪問Git官網需要科學上網&#xff0c;不會的可以私信我要軟件包&…

Golang interface總結(其一)

本篇是對golang 中的interface做一些淺層的、實用的總結 多態 常用場景 interface內僅包含函數類型&#xff0c;然后定義結構體去實現&#xff0c;如下 package mainimport "fmt"type Animal interface {Sound()Act() }type Cat struct{}func (c *Cat) Sound() {…

TVM計算圖分割--Collage

1 背景 為滿足高效部署的需要&#xff0c;整合大量優化的tensor代數庫和運行時做為后端成為必要之舉。現在的深度學習后端可以分為兩類&#xff1a;1&#xff09;算子庫(operator kernel libraries)&#xff0c;為每個DL算子單獨提供高效地低階kernel實現。這些庫一般也支持算…

Redis——內存策略

目錄 前言 1.過期策略 1.1過期策略——DB結構 1.2過期策略——惰性刪除 1.3過期策略——定期刪除 2.淘汰策略 2.1最少最近使用和使用頻率原理 2.2內存淘汰策略執行流程 總結&#xff1a; 前言 Redis之所以性能強&#xff0c;主要的原因就是基于內存存儲。然而單節點的R…

原型模式詳解及在自動駕駛場景代碼示例(c++代碼實現)

模式定義 原型模式&#xff08;Prototype Pattern&#xff09;是一種創建型設計模式&#xff0c;通過克隆已有對象來創建新對象&#xff0c;避免重復執行昂貴的初始化操作。該模式特別適用于需要高效創建相似對象的場景&#xff0c;是自動駕駛感知系統中處理大量重復數據結構的…

在kali中安裝AntSword(蟻劍)

步驟一、下載壓縮包 源碼&#xff1a;https://github.com/AntSwordProject/antSword&#xff0c;下載壓縮包。 加載器&#xff1a;https://github.com/AntSwordProject/AntSword-Loader&#xff0c;根據系統選擇壓縮包&#xff08;kali選擇AntSword-Loader-v4.0.3-linux-x64&…

華為倉頡編程語言基礎概述

第一章&#xff1a;技術演進與誕生背景 1.1 萬物智聯時代的編程挑戰 在5G、物聯網、邊緣計算等技術推動下&#xff0c;全球智能設備數量呈指數級增長。據IDC預測&#xff0c;2025年全球IoT設備將突破550億臺&#xff0c;這對系統級編程語言提出新要求&#xff1a; 異構硬件兼…

【Linux篇】探索進程間通信:如何使用匿名管道構建高效的進程池

從零開始&#xff1a;通過匿名管道實現進程池的基本原理 一. 進程間通信1.1 基本概念1.2 通信目的1.3 通信種類1.3.1 同步通信1.3.2 異步通信 1.4 如何通信 二. 管道2.1 什么是管道2.2 匿名管道2.2.1 pipe()2.2.2 示例代碼&#xff1a;使用 pipe() 進行父子進程通信2.2.3 管道容…

【LeetCode】嚼爛熱題100【持續更新】

2、字母異位詞分組 方法一&#xff1a;排序哈希表 思路&#xff1a;對每個字符串排序&#xff0c;排序后的字符串作為鍵插入到哈希表中&#xff0c;值為List<String>形式存儲單詞原型&#xff0c;鍵為排序后的字符串。 Map<String, List<String>> m new Ha…

2025年最新版 Git和Github的綁定方法,以及通過Git提交文件至Github的具體流程(詳細版)

文章目錄 Git和Github的綁定方法與如何上傳至代碼倉庫一. 注冊 GitHub 賬號二.如何創建自己的代碼倉庫&#xff1a;1.登入Github賬號&#xff0c;完成登入后會進入如下界面&#xff1a;2.點擊下圖中紅色框選的按鈕中的下拉列表3.選擇New repostitory4.進入創建界面后&#xff0…

FPGA開發板這樣做?(一)-像 Arduino 一樣玩 FPGA

這也是一個系列文章&#xff0c;來源之前和粉絲們在評論區討論的國外對于FPGA的開發或者入門所做的努力。 基本一篇文章會介紹一個FPGA開發板&#xff0c;重點在于為開發板準備的開發方式&#xff08;和國內大不相同&#xff09;。 今天的主角-PulseRain M10&#xff1a;像 Ard…

【C++游戲引擎開發】第21篇:基于物理渲染(PBR)——統計學解構材質與光影

引言 宏觀現象:人眼觀察到的材質表面特性(如金屬的高光銳利、石膏的漫反射柔和),本質上是微觀結構對光線的統計平均結果。 微觀真相:任何看似平整的表面在放大后都呈現崎嶇的微觀幾何。每個微表面(Microfacet)均為完美鏡面,但大量微表面以不同朝向分布時,宏觀上會表…

深入理解linux操作系統---第11講 bshell編程

11.1 正則表達式 11.1.1 字符集 正則表達式的字符集包含三類核心要素&#xff1a; 普通字符&#xff1a;直接匹配單個字符&#xff0c;如a匹配字母a范圍字符集&#xff1a;[a-z]匹配所有小寫字母&#xff0c;[0-9A-F]匹配十六進制數字預定義字符集&#xff1a;\d等價于[0-9]…

C++中的引用:深入理解與實用示例

文章目錄 C中的引用&#xff1a;深入理解與實用示例一、引用的基本概念二、引用作為別名的應用三、引用作為函數參數四、指針與引用的區別五、常量引用六、引用與返回值七、總結 C中的引用&#xff1a;深入理解與實用示例 在C編程中&#xff0c;“引用”是一個強大而重要的概念…

C#委托介紹

委托可以將方法作為參數傳遞&#xff0c;同時委托也可以自己作為參數傳遞 委托可分為自定義委托delegate 無返回值的Action 與有返回值的Func委托 也有匿名委托與Lamada 委托支持多播是事件的基礎 用處如在分線程調用主線程的UI invoke public delegate string Say(stri…

Node.js 模塊導入的基本流程

Node.js 模塊導入的基本流程&#xff0c;主要是 CommonJS 模塊加載機制&#xff08;即使用 require()&#xff09;的內部執行步驟。下面我用清晰的結構給你梳理一下這個過程&#xff1a; ? Node.js 模塊導入的基本流程&#xff08;使用 require()&#xff09; const someModu…

n8n 中文系列教程_02. 自動化平臺深度解析:核心優勢與場景適配指南

在低代碼與AI技術深度融合的今天&#xff0c;n8n作為開源自動化平臺正成為開發者提效的新利器。本文深度剖析其四大核心技術優勢——極簡部署、服務集成、AI工作流與混合開發模式&#xff0c;并基于真實場景測試數據&#xff0c;厘清其在C端高并發、多媒體處理等場景的邊界。 一…

【C++ Qt】信號和槽(內配思維導圖 圖文并茂 通俗易懂)

每日激勵&#xff1a;“不設限和自我肯定的心態&#xff1a;I can do all things。 — Stephen Curry” 緒論?&#xff1a; 本章是Qt中的第三章&#xff0c;也是我們理解Qt中必備的點 信號槽&#xff0c;它本質由信號和槽兩個來實現&#xff0c;其中將細致的講述如何自定義信號…