WHAT - 静态资源缓存穿透

在多环境部署中，静态资源缓存穿透是一个常见问题，尤其是当前端或后端的静态资源未正确更新，导致旧版本被意外加载。

对于这种问题，动态哈希命名策略是一种有效的解决方案，通过给资源文件添加哈希值来确保浏览器获取最新版本。注意，一般在打包工具的 production 生产模式下 build 后的产物都会自动使用哈希命名配置，无需手动配置。今天主要是介绍背后的实现原理，以下是具体的实现方式：

1. 动态哈希命名的基本思路

• 在构建时，为静态资源（JS、CSS、图片等）文件名添加基于内容的哈希值（如 MD5、SHA-256）。
• 在 HTML 或配置文件中，引用时使用带有哈希值的文件名，确保每次构建后的新文件名唯一，避免缓存问题。
• 结合 Cache-Control 策略，让浏览器长时间缓存文件，只有当文件内容变更时才会重新下载。

2. 具体实现

2.1 Vite/Webpack 配置动态哈希

在 Vite（或 Webpack）中，可以通过 build.rollupOptions.output 或 output.filename 进行哈希处理：

Vite (vite.config.ts)

import { defineConfig } from 'vite';export default defineConfig({build: {assetsDir: 'assets',rollupOptions: {output: {entryFileNames: 'assets/[name].[hash].js',chunkFileNames: 'assets/[name].[hash].js',assetFileNames: 'assets/[name].[hash].[ext]',}}}
});

Webpack (webpack.config.js)

module.exports = {output: {filename: 'js/[name].[contenthash].js',chunkFilename: 'js/[name].[contenthash].js',},
};

这样，每次构建时，生成的 JS/CSS 文件都会带上基于内容的 hash，确保不同版本的文件不会相互覆盖。

2.2 HTML 文件中动态引用

手动引用

在 HTML 中，可以通过 <script> 或 <link> 直接引入带哈希的文件：

<script src="/assets/app.abc123.js"></script>

使用 index.html 模板动态插入

如果是 Vite，可以使用 vite-plugin-html 插件：

import { createHtmlPlugin } from 'vite-plugin-html';export default defineConfig({plugins: [createHtmlPlugin({inject: {data: {title: 'My App',},},}),],
});

在 index.html 中：

<script type="module" src="<%= htmlWebpackPlugin.files.js %>"></script>

2.3 结合 Cache-Control 避免缓存穿透

在 nginx 或 CDN 服务器配置 Cache-Control，让静态资源长期缓存：

location /assets/ {expires max;add_header Cache-Control "public, immutable";
}

immutable 表示文件不会更改，即使 304 Not Modified 也不需要重新验证。

同时，确保 index.html 不被缓存，以便引用最新的哈希文件：

location / {expires -1;add_header Cache-Control "no-cache, must-revalidate";
}

2.4 适用于多环境的动态策略

在 vite.config.ts 或 webpack.config.js 中，可以根据环境变量来控制 hash 策略：

const isProduction = process.env.NODE_ENV === 'production';export default defineConfig({build: {rollupOptions: {output: {entryFileNames: isProduction ? 'assets/[name].[hash].js' : 'assets/[name].js',},},},
});

这样，在 开发环境 中不会生成哈希，方便调试，而 生产环境 则启用哈希。

总结

• 通过 文件名+哈希 方式，确保静态资源变更时不会被缓存拦截。
• 配置 Nginx/CDN 让 index.html 不缓存，而 JS/CSS 采用长时间缓存。
• 在 Vite/Webpack 结合 环境变量 实现多环境适配。

这样就能有效解决缓存穿透问题，让前端资源在多环境部署时始终保持最新！