node缓存设置

Posted 2020-10-12 瓶子2333

我把react项目分成4个板块，在路由的顶层

今天在手机上打开react项目的时候，发现平级路由跳转时某一个图片较多的板块图片总是渲染得很慢，这分明是重新发起请求了。

然后我先查一下react-router是否有什么我还没了解到的问题，可是只查到有人说动态修改查询参数的时候不重新渲染，以及“同级路由跳转理所当然会重新渲染，必要时把某些组件挂载为子路由组件”之类的。

然后我打开我的node服务器查看，发现果然每次跳转时服务器都log下了一堆请求，这就奇怪了。

然后我查了下，发现原来是我的服务端脚本里没有对图片文件的cache control设置，所以默认都没有设置缓存。。。晕菜~~~

在某些资源的响应报头添加cache-control就好了

然后再打开项目跳转，缓存到本地了...

 1         case ‘.jpg‘:
 2         case ‘.png‘:
 3         case ‘.gif‘:
 4         fs.readFile(‘.‘+pathname,(err,data)=>{
 5             if(err) console.log(err);
 6              res.writeHead(200, {
 7                "Content-Type": {
 8                    ".gif":"image/gif",
 9                    ".png":"image/png",
10                    ".jpg":"image/jpeg",
11                }[ext],
12                "Cache-Control":"max-age=100000"
13              });
14              res.write(data);
15              res.end();
16         });
17         break;
18         case ‘.html‘:
19         case ‘.css‘:
20         case ‘.js‘:
21         fs.readFile(‘.‘+pathname,(err,data)=>{
22             if(err) console.log(err);
23              res.writeHead(200, {
24                "Content-Type": {
25                ".html":"text/html",
26                ".css":"text/css",
27                ".js":"application/javascript",
28                }[ext],
29                "Cache-Control":"max-age=600"
30              });
31              res.write(data);
32              res.end();
33         });
34         break;
35         case ‘ico‘:break;