vue项目在nginx配置缓存策略

nginx开启缓存机制：

在/etc/nginx/sites-available/default文件加入如下代码
表示 对图片、js和css资源实现缓存，过期时间为60秒

        location ~* \.(?:jpg|jpeg|png|gif|ico|css|js)$ {
            root /data;
            expires 60s;
            add_header Cache-Control "public";
        }

下图表示成功开启

image.png

缓存过期后都会往服务器获取资源吗？

如果缓存未过期，刷新页面时，资源会显示200，size为from disk/from memory，表示在本地缓存获取资源。

image.png

缓存过期后，浏览器会去询问服务端，检查资源是否被更新，如果没更新，服务端会返回304，资源依然在读取本地

image.png

这和cache-controller为no-cache一个意思，并不是说资源都由服务端返回，而是浏览器每次都先去询问服务端，是否有新的资源。

真的有必要开启缓存吗？

在模拟10K网络条件下，加载时间相差5秒，这五秒就是发送http请求的代价，因此建议合理都设置缓存策略。

修改资源真的被更新到了吗？

我们对app.js进行修改，刷新浏览器，如下图，会返回200，并加载了108K的新资源。其他没有改动的资源，返回304

image.png

如果在缓存有效期内，我修改app.js，会返回304，因为缓存期内，浏览器不去询问服务端。

image.png

缓存期内怎么强制更新js/css资源？？？

第一步：首先加入test.js脚本, 内容为alert(1)

image.png

第二步：缓存有效期内修改test.js内容为alert(2)，弹框内容依然为数字1
解决方案：修改test.js文件名为test.v1.js并在index.html重新引入（因为我们的html文件没有缓存，所以可以通过更新html的引用实现资源替换）