title: Code splitting with create-react-app and react-loadable is not working
body: <p>I've followed various articles, particularly these...</p>
  
  <ul>
  <li><a href="https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html#next-steps" rel="nofollow noreferrer">Code Splitting in Create React App</a></li>
  <li><a href="https://github.com/jamiebuilds/react-loadable/blob/master/README.md" rel="nofollow noreferrer">react-loadable/README.md</a></li>
  </ul>
  
  <p>Here's a example of the code splitting -- <code>getRoutes()</code> is called in a component's render method:</p>
  
  <pre><code>// Edit: commented out original `Loadable` abstraction to use standard `Loadable`
  
  import React from 'react'
  // import L from 'react-loadable'
  import Loadable from 'react-loadable'
  import { BrowserRouter, Route, Switch } from 'react-router-dom'
  
  import { LoadingIndicator } from '../components'
  
  // const Loadable = opts =&gt;
  //   L({
  //     loading: LoadingIndicator,
  //     delay: 300,
  //     ...opts
  //   })
  
  const AuthenticateContainer = Loadable({
    loading: LoadingIndicator,
    loader: () =&gt; import(/* webpackChunkName: "auth" */ '../containers/Authenticate')
  })
  
  ...
  
  export default function getRoutes (isAuthed, browserHistory) {
  
    return (
      &lt;BrowserRouter&gt;
        &lt;Switch&gt;
          &lt;Route path="/auth" component={AuthenticateContainer} /&gt;
          ...
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    )
  }
  </code></pre>
  
  <p>..but my code is not splitting:</p>
  
  <pre><code>$ npm run build
  
  &gt; my-app@0.1.0 build /path/to/my-app
  &gt; bash -ac '. .env.production; react-scripts build'
  
  Creating an optimized production build...
  
  File sizes after gzip:
  
    854.84 KB (+4 B)  build/static/js/main.1aa92927.js
    17.53 KB          build/static/css/main.36b767d9.css
  
  The bundle size is significantly larger than recommended.
  Consider reducing it with code splitting: https: // goo.gl/9VhYWB
  You can also analyze the project dependencies: https: // goo.gl/LeUzfb
  
  The project was built assuming it is hosted at the server root.
  You can control this with the homepage field in your package.json.
  For example, add this to build it for GitHub Pages:
  
    "homepage" : "http: // myname.github.io/myapp",
  
  The build folder is ready to be deployed.
  You may serve it with a static server:
  
    yarn global add serve
    serve -s build
  
  Find out more about deployment here:
  
    http: // bit.ly/2vY88Kr
  </code></pre>
  
  <p>As you can see, the build result is not chunked, but a single JS file.</p>
  
  <p>What am I doing wrong?    </p>
  
  <hr>
  
  <p>Current versions used:</p>
  
  <pre><code>react-scripts: 1.1.4
  react-router-dom: 4.3.1
  webpack: 3.8.1
  npm: 6.1.0
  </code></pre>