{"action":"created","issue":{"url":"https://api.github.com/repos/smooth-code/loadable-components/issues/76","repository_url":"https://api.github.com/repos/smooth-code/loadable-components","labels_url":"https://api.github.com/repos/smooth-code/loadable-components/issues/76/labels{/name}","comments_url":"https://api.github.com/repos/smooth-code/loadable-components/issues/76/comments","events_url":"https://api.github.com/repos/smooth-code/loadable-components/issues/76/events","html_url":"https://github.com/smooth-code/loadable-components/issues/76","id":322363700,"number":76,"title":"loadable components is pre-loading all the route chunks from start","user":{"login":"tommyalvarez","id":2272455,"avatar_url":"https://avatars3.githubusercontent.com/u/2272455?v=4","gravatar_id":"","url":"https://api.github.com/users/tommyalvarez","html_url":"https://github.com/tommyalvarez","followers_url":"https://api.github.com/users/tommyalvarez/followers","following_url":"https://api.github.com/users/tommyalvarez/following{/other_user}","gists_url":"https://api.github.com/users/tommyalvarez/gists{/gist_id}","starred_url":"https://api.github.com/users/tommyalvarez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tommyalvarez/subscriptions","organizations_url":"https://api.github.com/users/tommyalvarez/orgs","repos_url":"https://api.github.com/users/tommyalvarez/repos","events_url":"https://api.github.com/users/tommyalvarez/events{/privacy}","received_events_url":"https://api.github.com/users/tommyalvarez/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-05-11T16:47:25Z","updated_at":"2018-05-12T15:02:38Z","closed_at":"2018-05-12T14:16:33Z","author_association":"NONE","body":"Hi,\r\n\r\nI'm not sure if this is expected behavior in development, a bug or a missconfiguration. I have the following loadable routes:\r\n\r\n```\r\nimport loadable from 'loadable-components'\r\n\r\n// Component split-code (lazy load)\r\nexport const Dashboard = loadable(() => import('./Dashboard'))\r\nexport const SignIn = loadable(() => import('./SignIn'))\r\n\r\nexport const PasswordReset = loadable(() => import('./PasswordReset'))\r\nexport const PasswordResetEdit = loadable(() => import('./PasswordResetEdit'))\r\n\r\nexport const Users = loadable(() => import('./Users'))\r\nexport const User = loadable(() => import('./User'))\r\nexport const EditUser = loadable(() => import('./EditUser'))\r\nexport const NewUser = loadable(() => import('./NewUser'))\r\n\r\n```\r\n\r\nAnd they are imported and used with react router v4 the following way: \r\n\r\n```\r\n// We only need to import the modules necessary for initial render\r\nimport React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Switch, Route } from 'react-router-dom'\r\nimport PrivateRoute from 'components/PrivateRoute'\r\nimport * as LoadableRoutes from './routes'\r\n\r\nexport const Routes = (props) => {\r\n  return (\r\n    <Switch>\r\n      <Route exact path='/sign-in' render={routeProps => <SignIn {...routeProps} persistor={props.persistor} />} />\r\n      <Route exact path='/passwords/new' component={LoadableRoutes.PasswordReset} />\r\n      <Route exact path='/passwords/edit' component={LoadableRoutes.PasswordResetEdit} />\r\n      <PrivateRoute exact path='/' component={LoadableRoutes.Dashboard} persistor={props.persistor} />\r\n      <PrivateRoute exact path='/users' component={LoadableRoutes.Users} persistor={props.persistor} />\r\n      <PrivateRoute exact path='/users/new' component={LoadableRoutes.NewUser} persistor={props.persistor} />\r\n      <PrivateRoute exact path='/users/:id' component={LoadableRoutes.User} persistor={props.persistor} />\r\n      <PrivateRoute exact path='/users/:id/edit' component={LoadableRoutes.EditUser} persistor={props.persistor} />\r\n    </Switch>\r\n  )\r\n}\r\n\r\nRoutes.propTypes = {\r\n  persistor: PropTypes.object.isRequired\r\n}\r\n\r\nexport default Routes\r\n\r\n```\r\nThis `<Switch>` component is imported from the main AppContainer like:\r\n\r\n```\r\nimport { PersistGate } from 'redux-persist/integration/react'\r\nimport { Router } from 'react-router-dom'\r\nimport Routes from 'routes'\r\n\r\nclass AppContainer extends Component {\r\n\r\n... [code ommited for brevity]...\r\n\r\n<Provider store={store}>\r\n            <PersistGate loading={null} persistor={persistor}>\r\n              <div style={{ height: '100%' }}>\r\n                <ReduxToastr\r\n                  timeOut={toastrDefaultTimeout}\r\n                  newestOnTop={newToastrAlwaysOnTop}\r\n                  preventDuplicates\r\n                  position='top-right'\r\n                  transitionIn='fadeIn'\r\n                  transitionOut='fadeOut'\r\n                  progressBar />\r\n                <Router history={history}>\r\n                  <CoreLayout {...this.props} >\r\n                    <Routes persistor={persistor} />\r\n                  </CoreLayout>\r\n                </Router>\r\n              </div>\r\n            </PersistGate>\r\n          </Provider>\r\n}\r\n\r\nexport default AppContainer\r\n\r\n```\r\n\r\nAnd here you can see how all the chunks are loaded right from the start (cache disabled):\r\n\r\n![image](https://user-images.githubusercontent.com/2272455/39936099-c4738e9c-5521-11e8-82b8-367524a3085f.png)\r\n\r\nIs this the expected behaviour and it will work different in production ? I'm using webpack v4.\r\n\r\nThanks!"},"comment":{"url":"https://api.github.com/repos/smooth-code/loadable-components/issues/comments/388561063","html_url":"https://github.com/smooth-code/loadable-components/issues/76#issuecomment-388561063","issue_url":"https://api.github.com/repos/smooth-code/loadable-components/issues/76","id":388561063,"user":{"login":"tommyalvarez","id":2272455,"avatar_url":"https://avatars3.githubusercontent.com/u/2272455?v=4","gravatar_id":"","url":"https://api.github.com/users/tommyalvarez","html_url":"https://github.com/tommyalvarez","followers_url":"https://api.github.com/users/tommyalvarez/followers","following_url":"https://api.github.com/users/tommyalvarez/following{/other_user}","gists_url":"https://api.github.com/users/tommyalvarez/gists{/gist_id}","starred_url":"https://api.github.com/users/tommyalvarez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tommyalvarez/subscriptions","organizations_url":"https://api.github.com/users/tommyalvarez/orgs","repos_url":"https://api.github.com/users/tommyalvarez/repos","events_url":"https://api.github.com/users/tommyalvarez/events{/privacy}","received_events_url":"https://api.github.com/users/tommyalvarez/received_events","type":"User","site_admin":false},"created_at":"2018-05-12T15:02:38Z","updated_at":"2018-05-12T15:02:38Z","author_association":"NONE","body":"@neoziro yes I was using rhl. Thanks for your quick response! "}}
{"actor":{"display_login":"tommyalvarez"}}