前端静态资源线上缓存最佳处理技术方案#前端

静态资源上线问题。

有学员出去面试，面试官问了一个问题：如果你真的没有做过前端的资源的上线发布，还真的不好回答。

正常前端要上线的时候，打完包之后会生成一个dist的文件夹，dist文件夹里面会扔到服务器上。这时候上完线之后，比如去请求页面的时候，基本上有js，对于用户来说，这时候有新的东西要更新。

可以看一下，有些资源是走的缓存的，比如js资源，包括图片资源，看走的缓存。所以对用户来说，如果不去强制刷新页面，不清缓存，访问其实还是旧的业务逻辑。

打完包之后会有一个index.html，但是这里面的东西通常index.html文件本身很少去做缓存的，所以它里面index.html去上线，上完线之后放到静态服务器上，就是它。上完之后，这里面外链的js是这个版本的。

比如这次更新完了之后要上线，有可能js变了，后缀名也变了，这时候要去上线。要去上线之后，用户访问网页的时候，加载的index.html里面还是旧的js文件。对于旧的js文件来说，有可能对于远端的复习上把旧的文件删掉了，还有可能会导致前面出错，因为请求不了js了。

因为上完线之后，js已经删掉了。这时候一般的方案就是要不就是index.html不做缓存，每次都请求最新的。像首页没有缓存，每次刷新页面都是请求新的，看到没有？但这种方式不是特别好。

这种方式怎么做？一般在index.html里面可以加上这样的请求头，加上标签，就是强制不让它缓存。再一个就是服务是部署在nginx，在nginx里面也可以加上不让它缓存。但是这种方法还不是最好的。

一般不管是js这种资源，还是图片，CSS还是index.html，基本上都会做缓存的。

比如静态资源，index.html还是图片，都会上到cdn服务上，每一次发包的时候，它会把原来的上一个版本的静态资源留着，也不会去删除。像会做一个备份，根据日期做一个备份。

对于用户来说，这个网站如果用户没有清缓存，访问index.html，那么它里面那种东西还是旧的内容，js文件名也是旧的，但是在这个服务器上，我给它保留备份。

如果这时候用户清缓存，或者打包之后，index.html的过期时间已经到了，过期时间到了，它会去请求新的，请求新的就去请求新的js文件，也就是在上线的时候，旧的静态资源，比如在这个里面的js，都会做备份的。

但是这样也有一个弊端，备份的内容会非常多，从二零二年的到现在的二零二四年了，都还在备份当中，因为不知道用户什么时候去刷新页面，有可能访问的是旧的，一般都设置缓存时间的，index.html可能缓存个30天。

如果面试官在问你的时候，可以以这种方式给面试官聊。