React svg / png 渲染在新 URL 上闪烁

Question

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

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

但相反，每次更改路线（有react-router4 个）都会加载此文件，这会导致闪烁。内容立即更改，但图像加载延迟 1 秒。png包含通过importin相同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你得到 a而不是的原因304是你有一个服务工作者，它将拦截请求并从缓存本身提供相同的服务。这本身就是200回应。如果您禁用 Service Worker 那么您将得到一个304