Реагирующая загрузка не извлекается из кеша

Question

Я использую реагирующую загрузку, а также предварительное кэширование. Кажется, что они оба прекрасно работают сами по себе, но я ожидал, что реагирующая загрузка будет смотреть на кэш-память для файла перед выполнением сетевого запроса. Это не так.

Установка тривиальна. В моем заголовке у меня есть кнопки входа в систему / регистрации, которые после нажатия должны вызывать, через реагирующую загрузку, выборку соответствующих файлов (ранее созданных с разделением кода). Нажатие запускает запрос файлов, как и ожидалось, но не из кэша.

Я проверил, что указанные файлы находятся в кеш-хранилище, прежде чем нажать на кнопку "Войти / Зарегистрироваться". Но на инструментах разработчика я вижу файлы, извлекаемые из сети, а не кеш-память.

Это, конечно, большая трата ширины полосы.

Та же проблема относится и к маршрутам, т. Е. Реагирующая загрузка также извлекает из сети файлы для последующих маршрутов, даже если файлы также доступны в кеше.

Не уверен, что код для публикации здесь, как сказал код как таковой, кажется, работает нормально. Я не смог найти место для создания проблемы в реактивно-загружаемом репозитории git.

В любом случае здесь появляется некоторый код:

Компонент заголовка:

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';
import Loadable from 'react-loadable';
import Status from './components/status';
import Nav from './components/nav';
import SessionHandler from '../session_handler/';
import { actionGetGeoInfo, actionUrlToRedirectOnLoginRegister } from './actions/';
import PropTypes from 'prop-types';
import { Loading, DELAY, TIMEOUT } from '../../../tools/functions';


const Login = Loadable({
    loader: () => import('../login/'),
    loading: Loading,
    delay: DELAY,
    timeout: TIMEOUT
});

const Register = Loadable({
    loader: () => import('../register/'),
    loading: Loading,
    delay: 200,
    timeout: TIMEOUT
});

.....

render() {

.......
    const activeDialog = () => {
        if (this.state.activeLogin) {
            return (
                <Login 
                    active={this.state.activeLogin} 
                    handleClick={this.handleLoginRegisterClick} 
                    handleClickPasswordReset={this.togglePasswordResetRequest} 
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
            )
        } else if (this.state.activeRegister) {
            return (
                <Register 
                    active={this.state.activeRegister} 
                    handleClick={this.handleLoginRegisterClick}
                    toggleDialog={this.toggleLoginRegisterDialogs} 
                />
            )
        } else if (this.state.activePasswordResetRequest) {
            return (
                <PasswordResetRequest 
                    active={this.state.activePasswordResetRequest} 
                    hidePasswordResetRequest={this.togglePasswordResetRequest} 
                />
            )
        }
        return null;
    }

    return (
        <header>
            <div className="header_top flex">
                <div className="branding"></div>
                <div className="header_spacer"></div>
                <Status handleClick={this.handleLoginRegisterClick}/>
            </div>
            <Nav />
            <div className="auth">
                {activeDialog()}
                <SessionHandler location={location}/>
            </div>
            {showAdForm()}
        </header>       
    );
}