title: Code splitting and dynamic loading in Webpack 4 with react loadable
body: <p>So I have a webpack 4 react app that has 2 parts:</p>
  
  <ul>
  <li>Login component</li>
  <li>Rest of the app</li>
  </ul>
  
  <p>My routes.js looks like this:</p>
  
  <pre><code>import React from 'react';
  import Home from 'Home';
  
  ....
  
  const LoadableLoginComponent = Loadable({
      loader: () =&gt; import('LoginComponent'),
      loading() {
          return &lt;div&gt;Loading...&lt;/div&gt;
      }
  });
  
  .....
  
  render() {
          if (!this.loggedIn) {
              return (
                  &lt;LoadableLoginComponent /&gt;
              );
          }
  
          return (
              &lt;Home /&gt;
          );
      }
  </code></pre>
  
  <p>My webpack generates 2 js files bundle.min.js and 0.min.js</p>
  
  <p>My assumption was that by default if the user is not logged in only the login component will load with 0.min.js and if user is logged in, the rest of the app will load
  but I see both bundle.min.js and 0.min.js being loaded.</p>