Question

我正在使用react-loadable和workbox-precaching。他们俩似乎都可以正常工作，但是我期望react-loadable在发出网络请求之前先查看文件的缓存存储。不是。

设置很简单。在我的标头上，有登录/注册按钮，一旦单击该按钮，应通过react-loadable触发对相应文件的提取（以前是通过代码拆分创建的）。单击确实会触发对文件的请求，这与预期的一样，但不是来自缓存。

在我单击登录/注册之前，我已验证了上述文件是否在缓存存储中。但是在开发工具上，我看到文件是从网络中获取的，而不是从缓存中获取的。

这当然是对带宽的极大浪费。

同一问题也适用于路由，即，即使文件也可以在高速缓存中使用，react-loadable也会从网络中获取用于后续路由的文件。

不确定在此处发布什么代码，因为这样的代码似乎可以正常工作。我找不到在react-loadable 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>       
    );
}

react-loadable不会从缓存中检索

0 个答案: