当前位置：首页 > news >正文

contenthash 持久化缓存

news 来源：原创 2025/4/26 1:47:44

以下是关于持久化缓存（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' // 第三方库单独哈希}}}
}