实战演示Nginx中Cache-Control针对JS模块化导入的缓存路径-Nginx-PHP中文网

nginx 应按构建产物路径前缀（如 /assets/、/static/js/）并匹配含哈希的 js 文件（如 .[a-f0-9]{8,}.js）设置 cache-control: public, max-age=31536000, immutable；html 和无哈希 js 需禁用强缓存。

实战演示nginx中cache-control针对js模块化导入的缓存路径

JS模块化导入（如 import 语句）在现代前端工程中普遍依赖相对路径或裸导入（如 import { foo } from 'lodash'），而实际请求的资源路径由构建工具（如 Vite、Webpack）解析并映射为带哈希的静态文件（如 /assets/index.abc123.js）。Nginx 的 Cache-Control 策略不能只按文件后缀粗放设置，必须结合模块化产物的路径特征精准控制缓存行为——否则易导致旧 JS 被强缓存、新版本不生效，或频繁回源拖慢首屏。

识别模块化构建产物的典型路径模式

主流构建工具生成的 JS 模块化资源路径具备可预测规律：

Vite：默认输出到 /assets/xxx.[hash].js 或 /node_modules/.vite/deps/xxx.[hash].js
Webpack（配合 contenthash）：常见于 /static/js/main.[contenthash:8].js 或 /js/chunk-vendors.[hash].js
Rollup + @rollup/plugin-terser：类似 /build/bundle.[hash].mjs

关键特征是路径中含「稳定哈希」（内容决定），且通常位于 /assets/、/static/、/build/ 等子目录。这些路径才是 Nginx 缓存策略应锚定的目标，而非泛泛匹配 *.js。

在 Nginx 中按路径前缀精准设置 Cache-Control

在 server 或 location 块中，用正则或前缀匹配定位模块化资源目录，显式设置强缓存头：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

location ^~ /assets/ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    # 或更严格：仅对含哈希的文件生效（避免误缓存 /assets/app.js 这类无 hash 的开发版）
    location ~* ^/assets/.*\.[0-9a-f]{8,}\.(js|mjs|cjs)$ {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }
}
<p>location ^~ /static/js/ {
location ~* .[0-9a-f]{8,}.js$ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
}</p>

注意：immutable 是关键——它告诉浏览器：该资源 URL 永远不会变内容，后续即使 max-age 过期也不需发条件请求（如 If-None-Match），直接复用本地副本，大幅提升重复访问性能。

排除非哈希资源与动态入口，避免缓存污染

HTML 入口文件（如 /index.html）、无哈希的 JS（如 /app.js）、以及可能被热更新覆盖的开发资源，必须禁用强缓存：

对根 HTML 设置短缓存或不缓存：add_header Cache-Control "no-cache, no-store, must-revalidate";
对未含哈希的 JS（如 /app.js）明确设为协商缓存：add_header Cache-Control "public, max-age=0, must-revalidate";
若使用 Vite 的 server.hmr 或 Webpack Dev Server，确保开发环境 Nginx 不启用上述强缓存规则（可用不同配置文件或 if 判断）