React svg / png render在新URL上闪烁

Question

我正在使用最新的create-react-app配置，并在不同路由之间切换时遇到问题。

我的所有SVG都包含在精灵文件中。从逻辑上讲， sprite.svg 文件应该在第一页加载时缓存。

但相反，路由的每次更改（使用react-router 4）都会加载此文件，从而导致闪烁。内容立即更改，但图片加载时滞1秒。 png中的import包含的jsx也是如此。

从我在控制台中看不到的，同样的文件一遍又一遍地下载。

http://cabin.surge.sh/的现场演示（即尝试在标题部分的定价/关于页面之间进行更改）

更新

我包含SVG图像的方式 - 是哑组件<SvgIcon name="checkmark" />

import React, { Component } from 'react';
import sprite from '../images/sprite.svg';

export default class SvgIcon extends Component {
  render(){
    const { name } = this.props;
    return(
      <svg className={"ico ico-" + name}>
        <use xlinkHref={sprite + "#ico-" + name}></use>
      </svg>
    )
  }
}

PNG图片

<img src={require(`../images/${authorImage}.png`)} srcSet={require(`../images/${authorImage}@2x.png`)  + ' 2x'} alt=""/>

Answer 1

您获得200而不是304的原因是您有一个服务工作者，它将拦截请求并从缓存本身提供相同的服务。这本身就是200回复。如果您禁用服务工作者，那么您将获得304

Answer 2

如果问题是图像未及早获取并导致页面更改闪烁，请尝试使用

componentDidMount() {
  const sprite = "../images/sprite.svg";
  const prefetchLink = document.createElement("link");

  prefetchLink.href = sprite;
  prefetchLink.rel = "prefetch";
  prefetchLink.as = "image";
  document.body.appendChild(prefetchLink);
}

这将提示浏览器在后台（空闲时间）获取以后可能需要的资源，并将其存储在浏览器的缓存中。页面加载完成后，便开始下载其他资源，如果用户单击预取的链接，则会立即加载内容。