静态资源服务器（手写一个静态资源中间件）

上一篇文章《详解页面静态资源的缓存策略，搞懂强缓存和协商缓存再做性能优化》我们从理论上介绍了浏览器和服务器是如何对静态资源做缓存的，这篇文章我们把它做成一个node服务器的静态资源中间件。代码开发既然是开发中间件，肯定是服务端要做的事情，大致流程如下：图1服务器接收到请求，先解析地址path（一般都是通过path对应到工程下的具体文件）；检查缓存头标志，如果内容没过期，仅修改头信息，304状态返回，如果内容过期了，就要正常返回内容。图2我们在static.js文件中开发，这个中间件允许设置目录和其他参数，如图2所示。图3如果不是GET或者HEAD请求，可以直接跳过这个中间件，也可以直接返回点什么！图4如何获取服务器静态文件的路径？如果设置了根目录，就把请求地址的pathname拼在根目录后面，如果没有设置根目录，就把pathname直接当做文件路径。图5当我们拿到文件路径后，需要判断这个路径是否真实存在？如果存在，它就有可能是文件夹，也有可能是文件，我们先处理是文件的情况。图6此处我们直接使用mime这个包来设置content-type。除了图5中处理文件夹的逻辑，还有当请求的路径最后一个字符是“/”时，也需要被当做文件夹处理。如果是文件夹，就需要设置文件夹下的默认文件，一般是index.html。图7如图7所示，有两处需要处理文件夹，我们抽取一下逻辑。图8options.index可以配置文件夹下默认的文件，类型是数组。如果找到一个存在的文件，就返回这个文件。那么图6中处理单个文件的逻辑和此处一致，可以抽取出来——hanleFile。代码写到这里，我们的服务已经可以正常返回静态文件的内容了，但是我们还没有设置缓存响应头，下面我们继续开发。图9如图9所示，我们设置了Cache-Control、Last-Modify和Etag响应头（etag的获取我们直接利用etag模块计算）。当一个请求非第一次到达服务器，它有可能带着缓存信息，所以我们要判断文件缓存是否过期，如果没有过期，就返回304状态。图10如图10，我们对比一下【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对请求响应头，这是文件内容是否变化的主要依据。图11如图11，只要符合服务器的缓存策略（etag==if-none-match或者last-modified<=If-modified-since），就可以返回304状态。实例图12如图12所示，我们写个demo测试一下，效果如下：图13从上面的效果看，我们可以发现，第一次请求是200，第二次请求会变成304，说明缓存策略生效了，符合预期！总结这篇文章主要是把之前的理论变成能实际应用的代码，虽然还有很多地方需要打磨，但是主体逻辑已经成型，从中可以学习一下思路。喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！