必须完成前端构建压缩、版本哈希注入、cdn分发和服务器缓存头配置四件事:用npm run production生成带哈希的压缩资源;模板中统一用mix()函数引用;nginx配置expires 1y和immutable头;通过asset_url或重写规则将静态资源推送到cdn并确保回源可达。

让Laravel生产环境的CSS、JS、图片等静态资源加载快、不卡顿、不因缓存导致用户看到旧版本,必须完成前端构建压缩、版本哈希注入、CDN分发和服务器缓存头配置四件事。
用Laravel Mix生成压缩版资源并注入版本哈希
打开VSCode集成终端(Ctrl+`),确保当前路径是项目根目录(含package.json)。
执行 npm run production —— 这会触发Webpack压缩、混淆、Tree Shaking,并在文件名中自动插入内容哈希(如app.8a3f2d.js),【这是强制浏览器加载新资源的唯一可靠方式】。
如果报错“command not found: mix”,说明未安装依赖:先运行 npm install,再重试。不要跳过这步,否则后续所有构建都会失败。
构建完成后,检查 public/mix-manifest.json 文件是否已生成且内容为有效JSON——它记录了哈希后的真实文件名映射,Laravel的 mix() 辅助函数全靠它工作。
在模板中用 mix() 替代 asset() 加载资源
将 Blade 模板中所有 {{ asset('js/app.js') }} 或 {{ URL::asset('css/style.css') }} 全部替换为 {{ mix('js/app.js') }} 和 {{ mix('css/style.css') }}。
mix() 函数会自动读取 mix-manifest.json,把原始路径映射为带哈希的最终路径(如 /js/app.8a3f2d.js),同时保留 public/ 目录结构。
注意:mix() 只对 public 目录下的资源生效,不能用于 storage/app 或 s3 上的文件;若混用 asset() 和 mix(),部分资源将无法更新,用户可能长期卡在旧版本。
配置Nginx强制返回强缓存头
编辑Nginx站点配置,在 server 块内添加 location 匹配规则:
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2|ttf|eot)$ {<br> expires 1y;<br> add_header Cache-Control "public, immutable";<br>}
这会让浏览器对所有匹配后缀的静态资源缓存整整一年,且标记为不可变(immutable),【只要文件名含哈希,浏览器就绝不会发起304验证请求】。
切勿对 .html 文件加此配置——HTML 是动态入口,必须每次请求都校验,否则路由跳转或SEO元信息将失效。
将静态资源推送到CDN并回源到public目录
方法一:用 Laravel 自带的 CDN 支持
在 .env 中设置:ASSET_URL=https://cdn.example.com,然后在 config/app.php 中确认 'asset_url' => env('ASSET_URL', null) 已启用。
此时所有 mix() 和 asset() 生成的URL都会自动前置该域名。
方法二:手动替换CDN前缀(推荐用于多CDN场景)
修改 public/.htaccess(Apache)或 Nginx 配置,将请求 rewrite 到 CDN 域名:rewrite ^/(js|css|images)/(.*)$ https://static.example.com/$1/$2 permanent;
该方式无需改PHP代码,但要求CDN回源地址指向当前服务器的 public/ 目录。
无论哪种方式,CDN节点必须能匿名 GET 到 public/ 下的哈希化文件——若CDN返回403或404,请检查服务器是否禁用了目录索引或设置了错误的root路径。











