title: ES6: Conditional & Dynamic Import Statements
body: <h1>Conditional</h1>
  
  <p>Is it possible to have conditional import statements like below?</p>
  
  <pre><code>if (foo === bar) {
      import Baz from './Baz';
  }
  </code></pre>
  
  <p>I have tried the above but get the following error (from Babel) when compiling.</p>
  
  <pre><code>'import' and 'export' may only appear at the top level
  </code></pre>
  
  <h1>Dynamic</h1>
  
  <p>Is it possible to have dynamic import statements like below?</p>
  
  <pre><code>for (let foo in bar) {
      if (bar.hasOwnProperty(foo)) {
          import Baz from `./${foo}`;
      }
  }
  </code></pre>
  
  <p>The above receives the same error from Babel whilst compiling.</p>
  
  <p>Is this possible to do or is there something I am missing?</p>
  
  <h1>Reasoning</h1>
  
  <p>The reason I am trying to do this is that I have a lot of imports for a number of "pages" and they follow a similar pattern. I would like to clean up my code base by importing these files with a dynamic for loop.</p>
  
  <p>If this is not possible then is there a better way to handle large number of imports in ES6?</p>