生产环境中怎样使用Contenthash为外链CSS做长效缓存？-css教程-PHP中文网

在生产环境中，使用 contenthash 为外链 css 做长效缓存的核心做法是：在构建工具（如 webpack、vite）的配置中，将文件名模板设置为包含 [contenthash]。这样生成的文件名会基于文件内容生成唯一的哈希值，只要文件内容不变，文件名就不变；一旦内容改变，文件名随之改变。浏览器会根据这个唯一文件名发起请求，配合服务器端设置 cache-control: max-age=31536000, immutable，即可实现永久缓存，同时确保用户能获取到最新的样式文件。

生产环境中怎样使用Contenthash为外链CSS做长效缓存？

Webpack 如何配置 Contenthash 输出文件名

在 Webpack 项目中，通过修改 output.filename 和 cssExtractLoader 的选项来启用 contenthash。这确保了提取出的 CSS 文件拥有基于内容的唯一标识。

生产环境中怎样使用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]。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

生产环境中怎样使用Contenthash为外链CSS做长效缓存？

// 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。这种机制无需额外插件，开箱即用。开发者只需确保服务器正确配置了静态资源的缓存头即可。