在生产环境中，使用 contenthash 为外链 css 做长效缓存的核心做法是：在构建工具（如 webpack、vite）的配置中，将文件名模板设置为包含 [contenthash]。这样生成的文件名会基于文件内容生成唯一的哈希值，只要文件内容不变，文件名就不变；一旦内容改变，文件名随之改变。浏览器会根据这个唯一文件名发起请求，配合服务器端设置 cache-control: max-age=31536000, immutable，即可实现永久缓存，同时确保用户能获取到最新的样式文件。
Webpack 如何配置 Contenthash 输出文件名
在 Webpack 项目中，通过修改 output.filename 和 cssExtractLoader 的选项来启用 contenthash。这确保了提取出的 CSS 文件拥有基于内容的唯一标识。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/[name].[contenthash:8].js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css'
})
]
};运行构建后，生成的 CSS 文件名类似 main.a1b2c3d4.css。其中 a1b2c3d4 是该 CSS 文件内容的哈希值。如果修改了 CSS 内容并重新构建，哈希值会发生变化，文件名也会更新，从而触发浏览器下载新文件。
立即学习“前端免费学习笔记（深入）”；
Vite 中 Contenthash 的默认行为与配置
Vite 默认使用 Rollup 进行构建，其 CSS 处理也遵循内容哈希策略。在 Vite 配置中，可以通过 build.cssCodeSplit 和 build.rollupOptions.output 来控制 CSS 的输出命名规则，通常直接使用 [hash] 或 [contenthash]。
// vite.config.js
export default {
build: {
cssCodeSplit: true,
rollupOptions: {
output: {
assetFileNames: (assetInfo) => {
if (assetInfo.name.endsWith('.css')) {
return 'css/[name].[hash].css';
}
return 'assets/[name].[hash][ext]';
}
}
}
}
}Vite 在构建时会自动为 CSS 文件生成基于内容的哈希文件名。例如 index.7f8g9h0i.css。这种机制无需额外插件，开箱即用。开发者只需确保服务器正确配置了静态资源的缓存头即可。
当 CSS 文件未发生任何变化时 Contenthash 的表现
当 CSS 文件内容未发生任何变化时，Contenthash 生成的文件名哈希值保持不变。这意味着浏览器不会重新请求该 CSS 文件，而是直接读取本地缓存。这是长效缓存生效的关键场景，确保了性能优化。
