以下是關于持久化緩存（contenthash）的深度技術解析，涵蓋原理、配置策略及最佳實踐，幫助我們構建高性能前端應用的緩存體系：

---

一、緩存機制核心原理

1. 瀏覽器緩存決策矩陣

觸發條件	緩存行為	對應場景
URL 未變化 + 強緩存有效	直接讀取磁盤/內存緩存	未修改的靜態資源
URL 變化	發起全新請求	修改文件名后的資源更新
URL 未變化 + 緩存過期	發送協商緩存請求（304/200）	需要服務端校驗的資源

2. 哈希策略類型對比

哈希類型	計算依據	穩定性場景	適用場景
hash	整個項目構建	任意文件修改即變化	不建議使用
chunkhash	入口依賴鏈	同入口鏈文件修改時變化	多入口基礎方案
contenthash	文件二進制內容	僅文件內容修改時變化	持久化緩存最佳方案

---

二、Webpack 持久化緩存配置

1. 基礎配置模板

// webpack.config.js
output: {filename: '[name].[contenthash:8].js',chunkFilename: 'async/[name].[contenthash:8].chunk.js',assetModuleFilename: 'assets/[hash][ext][query]'
}// CSS 文件專用（需配合 mini-css-extract-plugin）
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [new MiniCssExtractPlugin({filename: 'css/[name].[contenthash:8].css',chunkFilename: 'css/[name].[contenthash:8].chunk.css'})
]

2. 穩定性增強配置

optimization: {moduleIds: 'deterministic',    // 防止模塊順序變化導致ID改變chunkIds: 'deterministic',     // 保持chunk ID穩定性runtimeChunk: {                // 分離運行時文件name: entrypoint => `runtime-${entrypoint.name}`},splitChunks: {cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,filename: 'vendors/[name].[contenthash:8].js' // 第三方庫單獨哈希}}}
}

---

三、哈希生成機制深度解析

1. 內容哈希算法流程