如何优化nginx配置以实现前端资源部署的最佳效果？

本文共计777个文字，预计阅读时间需要4分钟。

前言：最近刚来一位运维小伙伴，负责线上环境的部署。前端更新资源后，总是需要清空缓存才能看到更新后的结果。客户那方面也反映更新了功能，但看不到变化。

方案：前端小伙伴应该都要知道，更新资源后，直接刷新页面即可看到更新后的效果，无需清空缓存。

前言

最近刚来一个运维小伙伴，做线上环境的部署的时候，前端更新资源后，总是需要清缓存才能看到个更新后的结果。客户那边也反馈更新了功能，看不到。

方案

前端小伙伴应该都知道浏览器的缓存策略，协商缓存和强缓存，如有不清楚的地方，可以看看这篇文章[聊聊浏览器缓存] (juejin.cn/post/7055224159642583047)。

现在比较流行的是单页应用。了解了浏览器的缓存之后，在常见的web开发中我们应该怎么设置呢。现在大多数的应用是通过webpack打包的，打包生成的资源名称会带上hash值。下面是打包后的文件

我们可以遵循之下规则

• index.html入口文件不加强制缓存，设置成协商缓存
• js 资源在线上环境可以设置成强缓存。

因为我们每次打包之后，入口文件会有变化，所以协商缓存会失效，会重新从服务器获取新的资源。而对应的js资源有hash的变化，所以有变化，会从服务器中获取。

nginx配置 nginx 非根目录部署（root要换成alias）。

要设置html，htm类型的文件走协商缓存，其它js文件走强缓存，我们可以这样配置。