loadable components is pre-loading all the route chunks from start

[tommyalvarez]

Hi,

I'm not sure if this is expected behavior in development, a bug or a missconfiguration. I have the following loadable routes:

import loadable from 'loadable-components'

// Component split-code (lazy load)
export const Dashboard = loadable(() => import('./Dashboard'))
export const SignIn = loadable(() => import('./SignIn'))

export const PasswordReset = loadable(() => import('./PasswordReset'))
export const PasswordResetEdit = loadable(() => import('./PasswordResetEdit'))

export const Users = loadable(() => import('./Users'))
export const User = loadable(() => import('./User'))
export const EditUser = loadable(() => import('./EditUser'))
export const NewUser = loadable(() => import('./NewUser'))

And they are imported and used with react router v4 the following way:

// We only need to import the modules necessary for initial render
import React from 'react'
import PropTypes from 'prop-types'
import { Switch, Route } from 'react-router-dom'
import PrivateRoute from 'components/PrivateRoute'
import * as LoadableRoutes from './routes'

export const Routes = (props) => {
  return (
    <Switch>
      <Route exact path='/sign-in' render={routeProps => <SignIn {...routeProps} persistor={props.persistor} />} />
      <Route exact path='/passwords/new' component={LoadableRoutes.PasswordReset} />
      <Route exact path='/passwords/edit' component={LoadableRoutes.PasswordResetEdit} />
      <PrivateRoute exact path='/' component={LoadableRoutes.Dashboard} persistor={props.persistor} />
      <PrivateRoute exact path='/users' component={LoadableRoutes.Users} persistor={props.persistor} />
      <PrivateRoute exact path='/users/new' component={LoadableRoutes.NewUser} persistor={props.persistor} />
      <PrivateRoute exact path='/users/:id' component={LoadableRoutes.User} persistor={props.persistor} />
      <PrivateRoute exact path='/users/:id/edit' component={LoadableRoutes.EditUser} persistor={props.persistor} />
    </Switch>
  )
}

Routes.propTypes = {
  persistor: PropTypes.object.isRequired
}

export default Routes

This <Switch> component is imported from the main AppContainer like:

import { PersistGate } from 'redux-persist/integration/react'
import { Router } from 'react-router-dom'
import Routes from 'routes'

class AppContainer extends Component {

... [code ommited for brevity]...

<Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
              <div style={{ height: '100%' }}>
                <ReduxToastr
                  timeOut={toastrDefaultTimeout}
                  newestOnTop={newToastrAlwaysOnTop}
                  preventDuplicates
                  position='top-right'
                  transitionIn='fadeIn'
                  transitionOut='fadeOut'
                  progressBar />
                <Router history={history}>
                  <CoreLayout {...this.props} >
                    <Routes persistor={persistor} />
                  </CoreLayout>
                </Router>
              </div>
            </PersistGate>
          </Provider>
}

export default AppContainer

And here you can see how all the chunks are loaded right from the start (cache disabled):

Is this the expected behaviour and it will work different in production ? I'm using webpack v4.

Thanks!

[gregberge]

Are you using React Hot Loader? If this is the case this is a bug in it. It has been solved and merged and a new version will be published soon.

[gregberge]

You can ignore it because this behaviour will not occur in production.

[tommyalvarez]

@neoziro yes I was using rhl. Thanks for your quick response!