title: VueJS dynamic/async loading of component
body: <p>Version of Vue: 2.4.2<br/>
  Version of webpack: 2.6.1</p>
  
  <p>The task is... I have a component. It gets global variable, a string. And depends on this variable it should dynamically load and show one of seven quite heavy components.  It seems to me that it's not a good idea to import it all because of their weight.</p>
  
  <p>Now I've made import like this:</p>
  
  <pre><code>import comp1 from '@/components/comp1.vue';
  import comp2 from '@/components/comp2.vue';
  
  export default {
      components: {comp1, comp2}
  ...
  }
  </code></pre>
  
  <p>In the template we'll use it like <code>&lt;comp1&gt;&lt;/comp1&gt;</code> And this is not what I want. The output file is pretty big and I must move on.</p>
  
  <p>I've tried made like this described in docs:</p>
  
  <pre><code>export default {
      components: {comp1: () =&gt; import('@/components/comp1.vue')}
  ...
  }
  </code></pre>
  
  <p>A-a-and we have an error:</p>
  
  <pre><code>[Vue warn]: Failed to resolve async component: function comp1() {
    return __webpack_require__.e/* import() */(1).then(__webpack_require__.bind(null, 37));
  }
  Reason: Error: Loading chunk 1 failed.
  </code></pre>
  
  <p>The initial idea was:</p>
  
  <pre><code>let param = window.GLOBAL_PARAM;
  let str = '@/components/comp2.vue';
  switch(param) {
      case 1: {
          str = '@/components/comp1.vue';
          break;
      }
      case 2: {
          str = '@/components/comp3.vue';
          break;
      }
      ...
  }
  
  export default {
      components: {comp: () =&gt; import(str)}
  ...
  }
  </code></pre>
  
  <p>But I've got an error:</p>
  
  <pre><code>[Vue warn]: Failed to resolve async component: function comp() {
    return __webpack_require__(50)(componentPath);
  }
  Reason: Error: Cannot find module '@/components/comp2.vue'.
  </code></pre>
  
  <p>As I understand, I have a problem with webpack, which can't resolve "@" symbol</p>
  
  <p>So, the questions are:</p>
  
  <ol>
  <li><p>How should I fix up async loading off my components? Maybe I've made a<br>
  sad mistake in my code?</p></li>
  <li><p>How should I organize by the right way the loading one of the seven components depending on some condition (global variable or param in component). Maybe there are some webpack preferences and/or some plugins. Or maybe I should resole this problem by the other approach?</p></li>
  </ol>