我把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;