реагирующая загрузка не извлекается из кеша - PullRequest
Новая
       39

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

0 голосов
/ 15 октября 2018

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

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

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

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

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

Не уверен, какой кодразместить здесь как, как сказано, код как таковой, кажется, работает нормально.Я не смог найти место для создания проблемы в реактивно-загружаемом репозитории 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>       
    );
}
...