contenthash 持久化缓存

news2025/7/15 8:58:41

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